{"id":228233,"date":"2022-10-06T19:41:00","date_gmt":"2022-10-06T16:41:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228233"},"modified":"2022-11-09T02:08:40","modified_gmt":"2022-11-08T23:08:40","slug":"otimos-exemplos-de-chart-js-que-voce-pode-usar-em-seu-site","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/otimos-exemplos-de-chart-js-que-voce-pode-usar-em-seu-site\/","title":{"rendered":"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/graficos-versus-tabelas-ou-quando-usar-um-sobre-o-outro\/\" title=\"Gr\u00e1ficos e tabelas\" >Gr\u00e1ficos e tabelas<\/a> fornecem uma exibi\u00e7\u00e3o visual r\u00e1pida e simples de estat\u00edsticas, tornando as informa\u00e7\u00f5es f\u00e1ceis de traduzir e comparar. Um gr\u00e1fico ou gr\u00e1fico bem apresentado pode tornar seu site mais atraente.<\/p>\n<p>Colocar um bom gr\u00e1fico em seu site pode ser feito usando <a href=\"http:\/\/www.chartjs.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Chart.js<\/a>. Esta \u00e9 uma biblioteca de scripts de visualiza\u00e7\u00e3o de dados.<\/p>\n<p>A produ\u00e7\u00e3o de gr\u00e1ficos e visualiza\u00e7\u00e3o de dados pode ser uma novidade para voc\u00ea. Voc\u00ea tamb\u00e9m pode ter tentado e descoberto o qu\u00e3o desafiador \u00e9 fazer corretamente.<\/p>\n<p>Aqui est\u00e1 uma lista de exemplos de Chart.js para colar em seus projetos.<\/p>\n<p>No Chart.js, h\u00e1 uma variedade de exibi\u00e7\u00f5es visuais funcionais, incluindo gr\u00e1ficos de barras, gr\u00e1ficos de pizza, gr\u00e1ficos de linhas e muito mais.<\/p>\n<p>Os gr\u00e1ficos oferecem op\u00e7\u00f5es de ajuste fino e personaliza\u00e7\u00e3o que permitem traduzir conjuntos de dados em gr\u00e1ficos visualmente impressionantes.<\/p>\n<h2>Mais sobre Chart.js<\/h2>\n<p><a href=\"https:\/\/www.chartjs.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d262a067.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Chart.js \u00e9 semelhante ao Google Charts ou Chartist, fornecendo uma extensa biblioteca de scripts para visualiza\u00e7\u00e3o de dados JavaScript.<\/p>\n<p>Est\u00e1 <a href=\"https:\/\/github.com\/chartjs\/Chart.js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dispon\u00edvel no GitHub<\/a>, portanto, \u00e9 uma biblioteca de c\u00f3digo aberto mantida pela comunidade.<\/p>\n<p>Os scripts na biblioteca Chart.js est\u00e3o dispon\u00edveis para uso de JavaScript. Uma vez copiados, os scripts podem ser aninhados dentro do elemento HTML &lt; canvas &gt;.<\/p>\n<p>Tamb\u00e9m h\u00e1 op\u00e7\u00f5es para usar os gr\u00e1ficos em estruturas de front-end, como <a href=\"https:\/\/massivepixel.io\/blog\/angular-vs-react-vs-vue\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">React, Vue e Angular<\/a>.<\/p>\n<p>Todos os gr\u00e1ficos da biblioteca s\u00e3o responsivos, o que significa que podem ser exibidos em janelas de tamanhos diferentes. Eles s\u00e3o dimensionados perfeitamente em pequenas telas de dispositivos m\u00f3veis e telas de dispositivos maiores.<\/p>\n<p>Junto com a capacidade de resposta, os gr\u00e1ficos oferecem um bom desempenho de renderiza\u00e7\u00e3o em todos os navegadores modernos. Isso significa que n\u00e3o importa como um visualizador exiba seus gr\u00e1ficos, eles estar\u00e3o rapidamente dispon\u00edveis e claramente vis\u00edveis.<\/p>\n<p>Os exemplos de Chart.js dispon\u00edveis incluem:<\/p>\n<ul>\n<li>Gr\u00e1ficos de Barras \u2013 As op\u00e7\u00f5es incluem Vertical, Horizontal, Multi-Eixo, Empilhado e Grupos Empilhados.<\/li>\n<li>Gr\u00e1ficos de Linhas \u2013 As op\u00e7\u00f5es incluem B\u00e1sico, Multi-Eixos, Escalonado e Interpola\u00e7\u00e3o. Tamb\u00e9m vem com op\u00e7\u00f5es para diferentes estilos de linha, estilos de ponto e tamanhos de ponto para personaliza\u00e7\u00e3o completa.<\/li>\n<li>Gr\u00e1ficos de radar<\/li>\n<li>Gr\u00e1fico de setores<\/li>\n<li>Gr\u00e1ficos de rosca<\/li>\n<li>Gr\u00e1ficos de bolhas<\/li>\n<li>Gr\u00e1ficos de dispers\u00e3o<\/li>\n<li>Gr\u00e1ficos de \u00e1rea polar<\/li>\n<\/ul>\n<p>Gr\u00e1ficos de v\u00e1rios tipos podem ser combinados para produzir uma sobreposi\u00e7\u00e3o das informa\u00e7\u00f5es em diferentes formatos.<\/p>\n<p>V\u00e1rias modifica\u00e7\u00f5es no estilo do gr\u00e1fico tamb\u00e9m podem ser encontradas na biblioteca, incluindo op\u00e7\u00f5es de escala, legenda e dica de ferramenta. Isso permite que voc\u00ea personalize a visualiza\u00e7\u00e3o de dados para atender \u00e0s necessidades do projeto e \u00e0s suas prefer\u00eancias pessoais.<\/p>\n<h2>Melhores exemplos de Chart.js<\/h2>\n<h3>PoC Live atualizando Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/statuswoe\/pen\/hyldD\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d271ff10.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Gradiente Chart.js personalizado<\/h3>\n<p><a href=\"https:\/\/codepen.io\/grayghostvisuals\/pen\/gpROOz\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d2804b93.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Este exemplo Chart.js mostra como usar e implementar um gradiente personalizado com Chart.js. Ele tamb\u00e9m usa um truque de preenchimento para evitar o colapso da altura do gr\u00e1fico durante o carregamento da p\u00e1gina.<\/p>\n<h3>Caixa de areia Chart.js-plugin-annotation<\/h3>\n<p><a href=\"https:\/\/codepen.io\/compwright\/pen\/mmQMrZ\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d28e1e0c.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Este exemplo \u00e9 \u00f3timo para desenhar uma caixa usando a biblioteca de anota\u00e7\u00f5es Chart.js.<\/p>\n<h3>Chart.js \u2013 modo de mesclagem \u2013 multiplicar<\/h3>\n<p><a href=\"https:\/\/codepen.io\/rozklad\/pen\/jaNrWW\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d29e89f6.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Este \u00e9 o modo de mesclagem de tela aplicado multiplicado no gr\u00e1fico Chart.js com gradiente.<\/p>\n<h3>Gr\u00e1fico de rosca SVG com anima\u00e7\u00e3o e dica de ferramenta<\/h3>\n<p><a href=\"https:\/\/codepen.io\/githiro\/pen\/ICfFE\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d2b0cbff.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Este \u00e9 um plugin jQuery leve especializado em desenhar gr\u00e1ficos de rosca.<\/p>\n<h3>Exemplo de Chart.js<\/h3>\n<p><a href=\"https:\/\/codepen.io\/venturads\/pen\/OyNejq\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d2c10144.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Esta \u00e9 uma amostra do Chart.js exibindo belos gr\u00e1ficos e ao mesmo tempo simples e f\u00e1cil de usar.<\/p>\n<h3>Remova a dica de ferramenta e a legenda Chart.js<\/h3>\n<p><a href=\"https:\/\/codepen.io\/cmlonder\/pen\/grjRLZ\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d2d166a2.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><br \/>\nIsso permite remover a dica de ferramenta e a legenda no Chart.js com op\u00e7\u00f5es globais.<\/p>\n<h3>Medium \u2013 Um painel bonito e responsivo<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/Jackthomsonn\/pen\/BNjJEj\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d2e1e03a.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Chart.js \u2013 gr\u00e1fico de linhas de temperatura<\/h3>\n<p><a href=\"https:\/\/codepen.io\/rozklad\/pen\/OOMGza\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d2f08849.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Este gr\u00e1fico de linhas Chart.js cont\u00e9m pontos transparentes e r\u00f3tulos personalizados.<\/p>\n<h3>Gr\u00e1fico Polar Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/FranciscusAgnew\/pen\/LRGPYX\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d30028ba.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Relat\u00f3rio de vendas &#8211; Vers\u00e3o escura<\/h3>\n<p><a href=\"https:\/\/codepen.io\/Ruddy\/pen\/yyqZqX\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d30f1dac.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Os plugins usados \u200b\u200bpodem ser encontrados em progressbar.js\/chart.js<\/p>\n<h3>Chart.js \u2013 Atualizar gr\u00e1fico dinamicamente por meio de solicita\u00e7\u00f5es Ajax<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/jordanwillis\/pen\/bqaGRR\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d31df5a3.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Chart.js \u2013 gr\u00e1fico de radar, sombras, foco personalizado<\/h3>\n<p><a href=\"https:\/\/codepen.io\/rozklad\/pen\/qVObdP\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d32c91f2.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Este radar Chart.js inclui sombras e um efeito de foco personalizado.<\/p>\n<h3>Exemplo de Chart.js 1.x<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/sethdavis512\/pen\/GoxdqK\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d33da000.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Gr\u00e1fico de linha<\/h3>\n<p><a href=\"https:\/\/codepen.io\/SitePoint\/pen\/WGZGNE\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d34c90e1.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Isso \u00e9 tudo que voc\u00ea precisa para criar um gr\u00e1fico de linhas m\u00ednimo no Chart.js. Simplesmente insira-o em algum lugar no seu depois de declarar o HTML5 .<\/p>\n<p>Todos os exemplos do Chart.js seguem o formato acima, na maioria das vezes, exigindo que voc\u00ea o aprenda apenas uma vez.<\/p>\n<h3>Gr\u00e1fico de pizza SVG com dicas de ferramentas e efeitos de foco<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/githiro\/pen\/xABCi\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d35baa11.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Chart.js \u2013 Gr\u00e1fico de \u00e1rea polar + legendas personalizadas + cores aleat\u00f3rias<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/michiel-huiskens\/pen\/XKRvxd\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d36bc866.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Gr\u00e1ficos horizontais empilhados com Chart.js<\/h3>\n<p><a href=\"https:\/\/codepen.io\/jamiecalder\/pen\/NrROeB\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d37a615a.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Isso mostra como fazer gr\u00e1ficos empilhados horizontalmente.<\/p>\n<h3>Gr\u00e1fico de barras agrupadas Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/bencarmichael\/pen\/XeYJXJ\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d38950b4.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Dica de ferramenta personalizada Chart.js Donut<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/mab213\/pen\/PZOXdE\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d397e80b.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Modelo de Painel Vue<\/h3>\n<p><a href=\"https:\/\/codepen.io\/mattrothenberg\/pen\/VbQLJa\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d3a736c8.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Isso foi feito com Vue, Tachyons e Chart.js.<\/p>\n<h3>Um exemplo de rosquinha Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/balix\/pen\/XXwBpW\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d3b5fb87.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Chart.js \u2013 Modo Hover da dica de ferramenta do gr\u00e1fico de linhas<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/jordanwillis\/pen\/ZeaLGj\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d3c6db10.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Widget de painel responsivo Chart.js<\/h3>\n<p><a href=\"https:\/\/codepen.io\/klesht\/pen\/aOWKQN\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d3d6077a.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Este \u00e9 um gr\u00e1fico aparentemente simples, destacando um \u00fanico ponto de dados apresentado como um desafio \u00fanico. O Chart.js fornece uma fun\u00e7\u00e3o de dica de ferramenta, mas, por padr\u00e3o, n\u00e3o h\u00e1 controle direto para uma sele\u00e7\u00e3o direcionada. As dicas de ferramentas est\u00e3o todas ativadas ou todas desativadas. Para resolver esse problema e destacar individualmente, onAnimationComplete \u00e9 usado para uma fun\u00e7\u00e3o usando uma instru\u00e7\u00e3o if para selecionar um ponto em um r\u00f3tulo especificado.<\/p>\n<h3>Chart.js em PNG usando phantomjs\/casperjs<\/h3>\n<p><a href=\"https:\/\/codepen.io\/tfayyaz\/pen\/IFnGp\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d3e3f0d9.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Aqui est\u00e1 um prot\u00f3tipo constru\u00eddo para transformar um gr\u00e1fico em um PNG usando phantomjs\/casperjs inseridos em relat\u00f3rios mensais de clientes enviados por e-mail.<\/p>\n<h3>Chart.js \u2013 Barra com escala de tempo<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/adrianhurt\/pen\/GqvBzo\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d3f2b049.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Gr\u00e1fico de bolhas<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/ruger161\/pen\/MyBvaE\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d401d96c.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Exemplo simples de Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/ksykes\/pen\/mwbZeL\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d4114ab8.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Chart.js \u2013 Rosquinha suave<\/h3>\n<p><a href=\"https:\/\/codepen.io\/rozklad\/pen\/wPvRgW\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d41ef96b.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>S\u00e3o limites de linha suaves aplicados em um gr\u00e1fico de rosca Chart.js.<\/p>\n<h3>Chart.js no modal de bootstrap<\/h3>\n<p><a href=\"https:\/\/codepen.io\/codeschubser\/pen\/PwajYp\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d42d4233.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Carregue um gr\u00e1fico de linhas do Chart.js em um modal de bootstrap. Os dados do gr\u00e1fico vieram dos links atribu\u00eddos.<\/p>\n<h3>Gr\u00e1fico de \u00e1rea polar Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/visualinventor\/pen\/wrpNjp\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d43aeedb.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Barras arredondadas Chart.js<\/h3>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d449a122.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d449a122.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" ><\/a><\/p>\n<p>Este c\u00f3digo de extens\u00e3o de cantos arredondados do gr\u00e1fico de barras para Chart.js.<\/p>\n<h3>Zoom e panor\u00e2mica do Chart.js<\/h3>\n<p><a href=\"https:\/\/codepen.io\/marcusvilete\/pen\/EEpKMx\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d4583614.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Este \u00e9 um zoom e pan usando chartjs-plugin-zoom.<\/p>\n<h3>Tabela de Habilidades<\/h3>\n<p><a href=\"https:\/\/codepen.io\/nodws\/pen\/ZWKbpe\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d468adc0.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Este \u00e9 um gr\u00e1fico para seu portf\u00f3lio usando Chart.js.<\/p>\n<h3>Estat\u00edsticas do vinho SFW<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/jdfranel\/pen\/ZOAKLq\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d478a0c0.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Gradientes Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/MillerTime\/pen\/wGRYxW\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d487d707.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Minigr\u00e1ficos Chart.js<\/h3>\n<p><a href=\"https:\/\/codepen.io\/ojame\/pen\/HpKvx\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d4988ca7.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Use Chart.js com Zepto para produzir Sparklines. Minigr\u00e1ficos podem ser usados \u200b\u200bem linha para representar uma tend\u00eancia r\u00e1pida.<\/p>\n<h3>Gr\u00e1fico de rosca \u2013 JS Raphael (Responsivo)<\/h3>\n<p><a href=\"https:\/\/codepen.io\/ahsanrathore\/pen\/nwquz\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d4a5629b.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Gr\u00e1fico de rosca \u2013 JS Raphael com layout responsivo<\/p>\n<h3>Experi\u00eancias com Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/arlekino\/pen\/Kkrah\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d4b37dbc.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Gr\u00e1fico Polar Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/sandra-willford\/pen\/YYrZjo\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d4c29966.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Exemplo de gr\u00e1fico de radar Chart.js<\/h3>\n<p><a href=\"https:\/\/codepen.io\/themakshter\/pen\/VpPGzv\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d4d1378c.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Esta \u00e9 uma demonstra\u00e7\u00e3o de um gr\u00e1fico de resultados com exemplos de dados esperados usando Chart.js.<\/p>\n<h3>Exemplo de gr\u00e1fico angular i\u00f4nico<\/h3>\n<p><a href=\"https:\/\/codepen.io\/VeldMuijz\/pen\/GJqZqV\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d4e014a9.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Aqui, \u00e9 mostrado um exemplo b\u00e1sico de Chart.js angular para aplicativos Ionic.<\/p>\n<h3>Exemplo de p\u00e1gina de administra\u00e7\u00e3o do Bootstrap<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/htschmed\/pen\/EEGJZY\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d4edd4da.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Gr\u00e1fico de bolhas Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/PeterVeras\/pen\/MWgeLoE\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d4fbf375.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Gr\u00e1ficos com Bootstrap, Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/gichuwil\/pen\/OPBzQQ\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d50a1948.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Teste Chart.js<\/h3>\n<p><a href=\"https:\/\/codepen.io\/timbergus\/pen\/EaLRWO\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d5184bc0.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Este \u00e9 um teste simples para Chart.js.<\/p>\n<h3>demonstra\u00e7\u00e3o do gr\u00e1fico de linhas angular-chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/hanigogo\/pen\/qadZkx\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d5290345.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Chart.js \u2013 altere o tipo de gr\u00e1fico e randomize os dados<\/h3>\n<p><a href=\"https:\/\/codepen.io\/andrew_levinson\/pen\/NYXpvL\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d5388e64.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Isso foi criado para mostrar a op\u00e7\u00e3o suspensa para alterar seu gr\u00e1fico Chart.js (dica: voc\u00ea precisa destruir o gr\u00e1fico primeiro!). Al\u00e9m disso, foi adicionada uma fun\u00e7\u00e3o divertida para randomizar pontos de dados ao clicar no bot\u00e3o, que utiliza a incr\u00edvel anima\u00e7\u00e3o incorporada.<\/p>\n<h3>Sem t\u00edtulo<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/chriswatts90\/pen\/yayoBg\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d54771d8.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Chart.js Ocultar outros conjuntos de dados ao clicar na legenda \u2013 Op\u00e7\u00e3o l\u00f3gica 1<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/jordanwillis\/pen\/BWKKKo\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d556de07.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Gr\u00e1fico de bolhas Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/arunvelsriram\/pen\/abmZKYR\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d5688c54.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>A rolagem i\u00f4nica Chart.js horizontal<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/afrgun\/pen\/oZjObd\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d576f430.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Prova de conceito: Chart.js com gradiente de fundo<\/h3>\n<p><a href=\"https:\/\/codepen.io\/hofmannsven\/pen\/YzygMqO\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d5863210.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Este \u00e9 um gr\u00e1fico de linhas que visualiza o peso ao longo do tempo. O gr\u00e1fico de linhas tem um gradiente de fundo para indicar os valores superiores.<\/p>\n<h3>Gr\u00e1fico de linhas Chart.js com opacidade<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/rtd62\/pen\/NpZvQj\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d594b624.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Exemplo de gr\u00e1fico de barras Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/jordanwillis\/pen\/xqrjGp\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d5a4d298.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Vue.js e Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/sethdavis512\/pen\/BWOmwP\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d5b52258.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Op\u00e7\u00f5es de escala do Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/xg-wang\/pen\/GmWwKR\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d5c9936c.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Layout de design de marketing por e-mail Chart.js<\/h3>\n<p><a href=\"https:\/\/codepen.io\/jhawes\/pen\/gbPrbZ\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d5d9c376.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Este \u00e9 um layout de design responsivo b\u00e1sico usando Chart.js. Ele chama o esquema de cores padr\u00e3o para elementos chart.js enquanto adiciona alguns bot\u00f5es e entradas de dados (somente design) que seriam \u00fateis em um <a href=\"https:\/\/dexatel.com\/blog\/sms-marketing-campaign\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sistema de Email Marketing<\/a>.<\/p>\n<h3>Pontos de radar arrast\u00e1veis \u200b\u200bChart.js<\/h3>\n<p><a href=\"https:\/\/codepen.io\/ianhulme\/pen\/roOOPR\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d5e9dfc5.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Este plug-in Chart.js oferece a capacidade de arrastar pontos de radar para cima e para baixo. Adicione alguns ajustes para uma execu\u00e7\u00e3o mais suave.<\/p>\n<h3>Prot\u00f3tipo r\u00e1pido do aplicativo iOS Health<\/h3>\n<p><a href=\"https:\/\/codepen.io\/mattrothenberg\/pen\/zqXJZX\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d5fbce90.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Prototipe rapidamente o aplicativo Apple Health iOS usando Chart.js + Dragula. Arraste e solte e clique nos controles segmentados para assistir \u00e0 atualiza\u00e7\u00e3o dos dados.<\/p>\n<h3>Gr\u00e1fico de colunas empilhadas Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/travishorn\/pen\/kkVKJG\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d60da0c1.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Chart.js \u2013 Gr\u00e1fico de radar mostra apenas a \u00faltima linha de escala<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/jordanwillis\/pen\/MpqoZw\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d61f1d49.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Angular Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/it-labs\/pen\/BjQVym\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d62f0321.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Chart.bundle.js Requer JS<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/adrianhurt\/pen\/ZOyKqJ\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d640671b.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Gr\u00e1ficos altern\u00e1veis \u200b\u200bem Angular\/Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/ChrisPerko\/pen\/qjYrBx\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d6503a54.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Gr\u00e1fico de medidor<\/h3>\n<p><a href=\"https:\/\/codepen.io\/haiiaaa\/pen\/rNVbmYy\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d661c85d.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Este \u00e9 um gr\u00e1fico de medidor simples para Chart.js.<\/p>\n<h3>Porcentagem do centro de rosca do Chart.js<\/h3>\n<p><a href=\"https:\/\/codepen.io\/jordanwillis\/pen\/vxNRmW\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d671d90e.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Um exemplo usando dicas de ferramentas personalizadas do Chart.js para gerar um r\u00f3tulo de porcentagem no centro do donut quando um usu\u00e1rio passa o mouse sobre uma se\u00e7\u00e3o pode ser encontrado aqui.<\/p>\n<h3>IU do rastreador de entrega<\/h3>\n<p><a href=\"https:\/\/codepen.io\/Jackthomsonn\/pen\/eJgoNR\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d68278b4.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Usei Chart.js para criar o gr\u00e1fico de linhas e foi um bom projeto para testar o BEM.<\/p>\n<h3>Chart.js atualizar tipo de gr\u00e1fico + redimension\u00e1vel<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/OutOfNutella\/pen\/ZyodWd\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d6995d4d.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Gr\u00e1fico de linhas D3<\/h3>\n<p><a href=\"https:\/\/codepen.io\/marcobiedermann\/pen\/GWGJvM\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d6a9a539.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Este \u00e9 um gr\u00e1fico de linhas SVG animado feito com d3.js.<\/p>\n<h3>Exemplo de gr\u00e1fico de linha Chart.js<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/jaredkc\/pen\/OVbxqL\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d6bb6d52.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Linhas de grade do Chart.js para tema escuro<\/h3>\n<h3><a href=\"https:\/\/codepen.io\/ruchern\/pen\/OgJqvr\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d6cd0835.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/h3>\n<h3>Girar um gr\u00e1fico de rosca (Chart.js)<\/h3>\n<p><a href=\"https:\/\/codepen.io\/markadrake\/pen\/gpWabB\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d6de57e0.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Esta \u00e9 uma caneta r\u00e1pida para ilustrar uma nova propriedade que pode ser usada para girar um gr\u00e1fico de rosca. Este exemplo \u00e9 espec\u00edfico da biblioteca Chart.js.<\/p>\n<h3>Chart.Bands.js<\/h3>\n<p><a href=\"https:\/\/codepen.io\/Tarqwyn\/pen\/QNzNVg\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d6f0710e.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Esses gr\u00e1ficos s\u00e3o \u00f3timos de se ver e f\u00e1ceis de adicionar a um site est\u00e1tico. Mas e se voc\u00ea quisesse adicion\u00e1-los no WordPress?<\/p>\n<p>Apresentando <strong><a href=\"https:\/\/wpdatatables.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wpDataTables<\/a><\/strong>, o plugin n\u00ba 1 de tabelas e gr\u00e1ficos para WordPress.<\/p>\n<p><a href=\"https:\/\/wpdatatables.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-173852-61e83d7020a59.jpg\" alt=\"\u00d3timos exemplos de Chart.js que voc\u00ea pode usar em seu site\" \/><\/a><\/p>\n<p>Cada tabela do WordPress pode ser usada como fonte de dados para criar gr\u00e1ficos do WordPress. Os gr\u00e1ficos s\u00e3o renderizados por 3 mecanismos poderosos e podem ser alterados em tempo real: Google Charts, HighCharts e Chart.js. Confira esta <a href=\"https:\/\/wpdatatables.com\/documentation\/wpdatacharts\/creating-charts-wordpress-wpdatachart-wizard\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">p\u00e1gina de documenta\u00e7\u00e3o f\u00e1cil de seguir,<\/a> onde apresentamos como criar um gr\u00e1fico no WordPress com nosso plugin amig\u00e1vel.<\/p>\n<p>Se voc\u00ea gostou de ler este artigo sobre exemplos do Chart.js, confira este artigo sobre <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/os-designs-de-graficos-mais-bonitos-das-interfaces-de-usuario\/\" title=\"designs de gr\u00e1ficos\">designs de gr\u00e1ficos<\/a>.<\/p>\n<p>Tamb\u00e9m escrevemos sobre alguns assuntos relacionados, como <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/os-diferentes-tipos-de-graficos-e-graficos-que-voce-usara\/\" title=\"tipos de gr\u00e1ficos\">tipos de gr\u00e1ficos<\/a>, <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/qual-e-a-melhor-alternativa-de-highcharts-escolha-um-daqui\/\" title=\"alternativas Highcharts\">alternativas Highcharts<\/a> e como criar \u00f3timos <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/como-criar-otimos-graficos-do-wordpress-com-esses-plugins\/\" title=\"gr\u00e1ficos WordPress\">gr\u00e1ficos WordPress<\/a>.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpdatatables.com\" class=\"external external_icon\">wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neste artigo, voc\u00ea encontra uma lista de exemplos de Chart.js para seus projetos. H\u00e1 uma variedade de gr\u00e1ficos de barras, gr\u00e1ficos de pizza e muito mais.<\/p>\n","protected":false},"author":1,"featured_media":173853,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[722,733,1021,846],"tags":[1170],"class_list":["post-228233","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvedor","category-javascript-8","category-sites-uteis","category-tutoriais","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=228233"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228233\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/173853"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=228233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=228233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=228233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}