{"id":15585,"date":"2024-02-24T09:01:38","date_gmt":"2024-02-24T12:01:38","guid":{"rendered":"https:\/\/categoriaoutros.com.br\/?p=15585"},"modified":"2024-02-26T12:49:18","modified_gmt":"2024-02-26T15:49:18","slug":"criando-graficos-com-chart-js-para-seu-site","status":"publish","type":"post","link":"https:\/\/categoriaoutros.com.br\/?p=15585","title":{"rendered":"Criando Gr\u00e1ficos de Barras com Chart.js para seu Site"},"content":{"rendered":"\n

Mas, afinal de contas, o que \u00e9 Chart.js<\/strong>?? Chart.js \u00e9 uma biblioteca JavaScript para criar gr\u00e1ficos em p\u00e1ginas da web; ele pode criar gr\u00e1ficos para serem visualizados de forma interativa, ou seja, disparando a\u00e7\u00f5es de anima\u00e7\u00f5es de acordo com cliques ou passar do mouse pelos usu\u00e1rios. <\/p>\n\n\n

\n
\"Criando
Criando Gr\u00e1ficos com Chart.js para seu Site<\/figcaption><\/figure><\/div>\n\n\n

Com o Chart.js, desenvolvedores podem facilmente gerar gr\u00e1ficos de barras, linhas, pizza e radar, entre outros, para apresentar dados de forma clara e atraente. A biblioteca \u00e9 bastante flex\u00edvel e personaliz\u00e1vel, o que a torna uma escolha popular para a visualiza\u00e7\u00e3o de dados em projetos web. <\/p>\n\n\n\n

Outro fator importante \u00e9 o fato de existir milhares de tutoriais e documenta\u00e7\u00e3o na internet e isso \u00e9 uma grande vantagem por n\u00e3o deixar o desenvolvedor sem suporte.<\/p>\n\n\n\n

Criando o primeiro gr\u00e1fico e explicando com passo a passo<\/h2>\n\n\n\n

Estou levando em conta que a p\u00e1gina, seja .html ou .php etc, est\u00e1 em branco, sem nada digitado.<\/p>\n\n\n\n

#1 Crie uma div com um nome de identifica\u00e7\u00e3o qualquer. Meu nome identificador ser\u00e1 meuGrafico:<\/p>\n\n\n\n

<<\/font>div<\/font>><\/font>\n  <<\/font>canvas<\/font> <\/font>id<\/font>=<\/font>"meuGrafico"<\/font>><\/<\/font>canvas<\/font>><\/font>\n<\/<\/font>div<\/font>><\/font><\/pre>\n\n\n\n
Precisamos ter a canva(ou tela) acima em nossa p\u00e1gina. \u00c9 dentro dessa div que o gr\u00e1fico ir\u00e1 aparecer. \u00c9 recomendado criar uma div como essa por motivo de responsividade. <\/p>\n\n\n\n
#2 Crie um link (CDN<\/a>) que trar\u00e1 todos os recursos necess\u00e1rios para cria\u00e7\u00e3o dos gr\u00e1ficos Chart.js para dentro da nossa p\u00e1gina:<\/p>\n\n\n\n
<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/chart.js"<\/font>><\/<\/font>script<\/font>><\/font>\n<\/pre>\n\n\n\n
Pode colocar a linha acima entre as tags <head> e <\/head> do HTML, se preferir.<\/p>\n\n\n\n
#3 Agora vem o c\u00f3digo com os dados que aparecer\u00e3o dentro do gr\u00e1fico. Logicamente que em uma situa\u00e7\u00e3o real esses dados ser\u00e3o trazidos de um banco de dados. Estou falando dos dados dentro de Labels<\/strong>, Label<\/strong> e data<\/strong>.<\/p>\n\n\n\n
<<\/font>script<\/font>><\/font>\n  <\/font>const<\/font> ctx = <\/font>document<\/font>.getElementById<\/font>('meuGrafico'<\/font>);<\/font>\n\n  <\/font>new<\/font> Chart<\/font>(ctx, <\/font>{<\/font>\n    type: <\/font>'bar'<\/font>,<\/font>\n    data: <\/font>{<\/font>\n      labels: <\/font>[<\/font>'Vermelho'<\/font>, <\/font>'Azul'<\/font>, <\/font>'Amarelo'<\/font>, <\/font>'Verde'<\/font>, <\/font>'Roxo'<\/font>, <\/font>'Laranja'<\/font>]<\/font>,<\/font>\n      datasets: <\/font>[{<\/font>\n        label: <\/font>'# Vota\u00e7\u00e3o'<\/font>,<\/font>\n        data: <\/font>[<\/font>12, <\/font>19, <\/font>3, <\/font>5, <\/font>2, <\/font>3]<\/font>,<\/font>\n        borderWidth: <\/font>1\n      <\/font>}]<\/font>\n    <\/font>}<\/font>,<\/font>\n    options: <\/font>{<\/font>\n      scales: <\/font>{<\/font>\n        y: <\/font>{<\/font>\n          beginAtZero: <\/font>true<\/font>\n        <\/font>}<\/font>\n      <\/font>}<\/font>\n    <\/font>}<\/font>\n  <\/font>}<\/font>);<\/font>\n<\/<\/font>script<\/font>><\/font><\/pre>\n\n\n\n
Agora voc\u00ea poder\u00e1 abrir o site no navegador e ver o gr\u00e1fico aparecer.<\/p>\n\n\n
\n
\"Gr\u00e1fico
Gr\u00e1fico em Chart.js<\/figcaption><\/figure><\/div>\n\n\n
Inserindo t\u00edtulo no gr\u00e1fico<\/h3>\n\n\n\n
Podemos usar titles<\/strong> para inserirmos t\u00edtulos dentro do nosso gr\u00e1fico. Postarei apenas a parte das op\u00e7\u00f5es:<\/p>\n\n\n\n
 options: <\/font>{<\/font>\n        plugins: <\/font>{<\/font>\n           title: <\/font>{<\/font>\n                display: <\/font>true<\/font>,<\/font>\n                text: <\/font>'Cores Vota\u00e7\u00e3o'<\/font>,  <\/font>\n                color: <\/font>'blue'<\/font>,<\/font>\n                font: <\/font>{<\/font>\n                    weight: <\/font>'bold'<\/font>,<\/font>\n                    size: <\/font>20                <\/font>\n                <\/font>}<\/font>\n           <\/font>}<\/font>,<\/font>\n        <\/font>}<\/font>       <\/font>\n\n <\/font>}<\/font><\/pre>\n\n\n\n
Veja o resultado:<\/p>\n\n\n
\n
\"Inserindo
Inserindo t\u00edtulo no gr\u00e1fico<\/figcaption><\/figure><\/div>\n\n\n
Alterando as cores das barras<\/h3>\n\n\n\n
Na imagem acima pode ver que as barras est\u00e3o com cores diferentes e variadas. Se quiser alterar as cores das barras, que acima est\u00e3o todas azuis, basta fazer da seguinte forma,<\/p>\n\n\n\n
<<\/font>script<\/font>><\/font>\n\nconst<\/font> ctx = <\/font>document<\/font>.getElementById<\/font>('meuGrafico'<\/font>);<\/font>\n\nconst<\/font> myChart = <\/font>new<\/font> Chart<\/font>(ctx, <\/font>{<\/font>\n  type: <\/font>'bar'<\/font>,<\/font>\n  data: <\/font>{<\/font>\n    labels: <\/font>[<\/font>'Vermelho'<\/font>, <\/font>'Azul'<\/font>, <\/font>'Amarelo'<\/font>, <\/font>'Verde'<\/font>, <\/font>'Roxo'<\/font>, <\/font>'Laranja'<\/font>]<\/font>,<\/font>\n    datasets: <\/font>[{<\/font>\n      label: <\/font>'# Vota\u00e7\u00e3o'<\/font>,<\/font>\n      data: <\/font>[<\/font>12, <\/font>19, <\/font>3, <\/font>5, <\/font>2, <\/font>3]<\/font>,<\/font>\n      backgroundColor: <\/font>[<\/font>\n        <\/font>'rgba(255, 0, 0, 0.8)'<\/font>, <\/font>\/\/ Vermelho<\/font>\n        <\/font>'rgba(0, 0, 255, 0.8)'<\/font>, <\/font>\/\/ Azul<\/font>\n        <\/font>'rgba(255, 255, 0, 0.8)'<\/font>, <\/font>\/\/ Amarelo<\/font>\n        <\/font>'rgba(0, 128, 0, 0.8)'<\/font>, <\/font>\/\/ Verde<\/font>\n        <\/font>'rgba(128, 0, 128, 0.8)'<\/font>, <\/font>\/\/ Roxo<\/font>\n        <\/font>'rgba(255, 165, 0, 0.8)'<\/font> <\/font>\/\/ Laranja<\/font>\n      <\/font>]<\/font>,<\/font>\n      borderWidth: <\/font>1\n    <\/font>}]<\/font>\n  <\/font>}<\/font>,<\/font>\n  options: <\/font>{<\/font>\n    scales: <\/font>{<\/font>\n      y: <\/font>{<\/font>\n        beginAtZero: <\/font>true<\/font>,<\/font>\n        max: <\/font>20 <\/font>\/\/ Ajusta o valor m\u00e1ximo do eixo Y<\/font>\n      <\/font>}<\/font>\n    <\/font>}<\/font>\n  <\/font>}<\/font>\n}<\/font>);<\/font>\n\n<\/<\/font>script<\/font>><\/font>\n<\/pre>\n\n\n\n
Veja o resultado:<\/p>\n\n\n
\n
\"Alterando
Alterando as cores das barras<\/figcaption><\/figure><\/div>\n\n\n
Adicionando outro conjunto de dados (outras barras)<\/h3>\n\n\n\n
Se quisermos criar outras barras para cada cor, por exemplo, uma segunda vota\u00e7\u00e3o, podemos fazer da seguinte forma, criando outro data ou conjunto de dados:<\/p>\n\n\n\n
const<\/font> ctx = <\/font>document<\/font>.getElementById<\/font>('meuGrafico'<\/font>);<\/font>\n\nnew<\/font> Chart<\/font>(ctx, <\/font>{<\/font>\n  type: <\/font>'bar'<\/font>,<\/font>\n  data: <\/font>{<\/font>\n    labels: <\/font>[<\/font>'Vermelho'<\/font>, <\/font>'Azul'<\/font>, <\/font>'Amarelo'<\/font>, <\/font>'Verde'<\/font>, <\/font>'Roxo'<\/font>, <\/font>'Laranja'<\/font>]<\/font>,<\/font>\n    datasets: <\/font>[<\/font>\n      <\/font>{<\/font>\n        label: <\/font>'# Vota\u00e7\u00e3o 1'<\/font>,<\/font>\n        data: <\/font>[<\/font>12, <\/font>19, <\/font>3, <\/font>5, <\/font>2, <\/font>3]<\/font>,<\/font>\n        borderWidth: <\/font>1\n      <\/font>}<\/font>,<\/font>\n      <\/font>{<\/font>\n        label: <\/font>'# Vota\u00e7\u00e3o 2'<\/font>,<\/font>\n        data: <\/font>[<\/font>8, <\/font>14, <\/font>7, <\/font>4, <\/font>1, <\/font>2]<\/font>,<\/font>\n        borderWidth: <\/font>1\n      <\/font>}<\/font>\n    <\/font>]<\/font>\n  <\/font>}<\/font>,<\/font>\n  options: <\/font>{<\/font>\n    scales: <\/font>{<\/font>\n      y: <\/font>{<\/font>\n        beginAtZero: <\/font>true<\/font>,<\/font>\n        max: <\/font>20 <\/font>\/\/ Ajusta o valor m\u00e1ximo do eixo Y<\/font>\n      <\/font>}<\/font>\n    <\/font>}<\/font>\n  <\/font>}<\/font>\n}<\/font>);<\/font>\n<\/pre>\n\n\n\n
Veja o resultado,<\/p>\n\n\n
\n
\"\"\/
Adicionando outro conjunto de dados (outras barras)<\/figcaption><\/figure><\/div>\n\n\n
Colocando uma linha limite para ver quais barras ultrapassaram<\/h3>\n\n\n\n
Podemos colocar um limite para sabermos quais barras ou vota\u00e7\u00f5es ultrapassaram ou ficaram abaixo da expectativa:<\/p>\n\n\n\n
const<\/font> ctx = <\/font>document<\/font>.getElementById<\/font>('meuGrafico'<\/font>);<\/font>\n\nnew<\/font> Chart<\/font>(ctx, <\/font>{<\/font>\n  type: <\/font>'bar'<\/font>,<\/font>\n  data: <\/font>{<\/font>\n    labels: <\/font>[<\/font>'Vermelho'<\/font>, <\/font>'Azul'<\/font>, <\/font>'Amarelo'<\/font>, <\/font>'Verde'<\/font>, <\/font>'Roxo'<\/font>, <\/font>'Laranja'<\/font>]<\/font>,<\/font>\n    datasets: <\/font>[<\/font>\n      <\/font>{<\/font>\n        label: <\/font>'# Vota\u00e7\u00e3o 1'<\/font>,<\/font>\n        data: <\/font>[<\/font>12, <\/font>19, <\/font>3, <\/font>5, <\/font>2, <\/font>3]<\/font>,<\/font>\n        backgroundColor: <\/font>[<\/font>\n        <\/font>'rgba(255, 165, 0, 0.8)'<\/font> <\/font>\/\/ Laranja<\/font>\n      <\/font>]<\/font>,<\/font>\n        borderWidth: <\/font>1\n      <\/font>}<\/font>,<\/font>\n      <\/font>{<\/font>\n        label: <\/font>'# Vota\u00e7\u00e3o 2'<\/font>,<\/font>\n        data: <\/font>[<\/font>8, <\/font>14, <\/font>7, <\/font>4, <\/font>1, <\/font>2]<\/font>,<\/font>\n        backgroundColor: <\/font>[<\/font>\n        <\/font>'rgba(55, 165, 60, 0.8)'<\/font> <\/font>\/\/ Laranja<\/font>\n      <\/font>]<\/font>,<\/font>\n\n        borderWidth: <\/font>1\n      <\/font>}<\/font>,<\/font>\n      <\/font>{<\/font>\n        type: <\/font>'line'<\/font>, <\/font>\/\/ Tipo de linha<\/font>\n        label: <\/font>'# M\u00e9dia'<\/font>,<\/font>\n        data: <\/font>[<\/font>10, <\/font>10, <\/font>10, <\/font>10, <\/font>10, <\/font>10]<\/font>, <\/font>\/\/ Valores da linha horizontal<\/font>\n        borderColor: <\/font>'red'<\/font>, <\/font>\/\/ Cor da linha<\/font>\n        borderDash: <\/font>[<\/font>5, <\/font>5]<\/font>,<\/font>\n        borderWidth: <\/font>1, <\/font>\/\/ Espessura da linha<\/font>\n        fill: <\/font>false<\/font>, <\/font>\/\/ N\u00e3o preenche a \u00e1rea abaixo da linha<\/font>\n        pointRadius: <\/font>0, <\/font>\/\/ Esconde os pontos da linha<\/font>\n        spanGaps: <\/font>true<\/font>, <\/font>\/\/ Faz a linha se estender por toda a \u00e1rea do gr\u00e1fico<\/font>\n      <\/font>}<\/font>\n    <\/font>]<\/font>\n  <\/font>}<\/font>,<\/font>\n  options: <\/font>{<\/font>\n    scales: <\/font>{<\/font>\n      y: <\/font>{<\/font>\n        beginAtZero: <\/font>true<\/font>,<\/font>\n        max: <\/font>20 <\/font>\/\/ Ajusta o valor m\u00e1ximo do eixo Y<\/font>\n      <\/font>}<\/font>\n    <\/font>}<\/font>\n  <\/font>}<\/font>\n}<\/font>);<\/font>\n<\/pre>\n\n\n
\n
\"Colocando
Colocando uma linha limite para ver quais barras ultrapassaram<\/figcaption><\/figure><\/div>\n\n\n
Uma outra forma de colocar uma linha horizontam em um ponto espec\u00edfico \u00e9 atrav\u00e9s de anota\u00e7\u00f5es. Mas, para isso precisaremos do CDN da biblioteca.  Coloque entre as tags <head> e <\/head> <\/p>\n\n\n\n
<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/chartjs-plugin-annotation"<\/font>><\/<\/font>script<\/font>><\/font>\n<\/pre>\n\n\n\n
Agora acrescente em op\u00e7\u00f5es,<\/p>\n\n\n\n
plugins: {\n        annotation: {\n          annotations: [{\n            type: 'line',\n            mode: 'horizontal',\n            scaleID: 'y',\n            value: 10,\n            borderColor: 'rgb(255, 0, 0)',\n            borderWidth: 2,\n            label: {\n              content: 'Label na Barra',\n              enabled: true\n            }\n          }]\n        }\n      }\n<\/code><\/pre>\n\n\n\n
O c\u00f3digo completo ficar\u00e1 assim,<\/p>\n\n\n\n
<<\/font>script<\/font>><\/font>\n  <\/font>const<\/font> ctx = <\/font>document<\/font>.getElementById<\/font>('meuGrafico'<\/font>);<\/font>\n\n  <\/font>new<\/font> Chart<\/font>(ctx, <\/font>{<\/font>\n    type: <\/font>'bar'<\/font>,<\/font>\n    data: <\/font>{<\/font>\n      labels: <\/font>[<\/font>'Vermelho'<\/font>, <\/font>'Azul'<\/font>, <\/font>'Amarelo'<\/font>, <\/font>'Verde'<\/font>, <\/font>'Roxo'<\/font>, <\/font>'Laranja'<\/font>]<\/font>,<\/font>\n      datasets: <\/font>[{<\/font>\n        label: <\/font>'# Vota\u00e7\u00e3o'<\/font>,<\/font>\n        data: <\/font>[<\/font>12, <\/font>19, <\/font>3, <\/font>5, <\/font>2, <\/font>3]<\/font>,<\/font>\n        borderWidth: <\/font>1\n      <\/font>}]<\/font>\n    <\/font>}<\/font>,<\/font>\n    options: <\/font>{<\/font>\n      scales: <\/font>{<\/font>\n        y: <\/font>{<\/font>\n          beginAtZero: <\/font>true<\/font>\n        <\/font>}<\/font>\n      <\/font>}<\/font>,<\/font>\n      plugins: <\/font>{<\/font>\n        annotation: <\/font>{<\/font>\n          annotations: <\/font>[{<\/font>\n            type: <\/font>'line'<\/font>,<\/font>\n            mode: <\/font>'horizontal'<\/font>,<\/font>\n            scaleID: <\/font>'y'<\/font>,<\/font>\n            value: <\/font>10,<\/font>\n            borderColor: <\/font>'rgb(255, 0, 0)'<\/font>,<\/font>\n            borderWidth: <\/font>2,<\/font>\n            label: <\/font>{<\/font>\n              content: <\/font>'Label na Barra'<\/font>,<\/font>\n              enabled: <\/font>true<\/font>\n            <\/font>}<\/font>\n          <\/font>}]<\/font>\n        <\/font>}<\/font>\n      <\/font>}<\/font>\n    <\/font>}<\/font>\n  <\/font>}<\/font>);<\/font>\n<\/<\/font>script<\/font>><\/font>\n<\/pre>\n\n\n\n
E esse seria o resultado:<\/p>\n\n\n
\n
\"Colocando
Colocando uma linha limite para ver quais barras ultrapassaram<\/figcaption><\/figure><\/div>\n\n\n
Mostrar valores no topo das barras em Chart.js<\/h3>\n\n\n\n
Antes de tudo, adicione o link https:\/\/cdn.jsdelivr.net\/npm\/chartjs-plugin-datalabels<\/strong> abaixo do link principal, entre as tags <head> e <head> <\/p>\n\n\n\n
Ficar\u00e1 assim:<\/p>\n\n\n\n
<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chartjs-plugin-datalabels\"><\/script><\/strong><\/code><\/pre>\n\n\n\n
Logo abaixo de const ctx = document.getElementById(‘meuGrafico’);<\/strong> digite Chart.register(ChartDataLabels);<\/strong><\/strong> <\/p>\n\n\n\n
.....\nconst ctx = document.getElementById('meuGrafico');\n\n \/\/Registre manualmente o plugin chartjs datalabels\n Chart.register(ChartDataLabels);<\/strong>\n......<\/code><\/pre>\n\n\n\n
Dentro da se\u00e7\u00e3o options<\/strong>, digite as linhas abaixo pra nosso datalabels<\/p>\n\n\n\n
datalabels: {\n               \/\/ Posi\u00e7\u00e3o dos r\u00f3tulos <\/mark>\n               \/\/ (in\u00edcio, fim, centro, etc.)<\/mark>\n               anchor: 'end',\n               \/\/ Alinhamento dos r\u00f3tulos <\/mark>\n               \/\/ (in\u00edcio, fim, centro, etc.)<\/mark>\n               align: 'end',\n               \/\/ cores dos r\u00f3tulos<\/mark>\n               color: 'blue',\n               font: {\n                     weight: 'bold',\n                     },\n               formatter: function (value, context) {\n                       \/\/ Mostre o valor atual dos dados<\/mark>\n                       return value;\n              }\n           }<\/code><\/pre>\n\n\n\n
Veja o c\u00f3digo completo e imagem do resultado:<\/p>\n\n\n\n
<<\/font>canvas<\/font> <\/font>id<\/font>=<\/font>"meuGrafico"<\/font>><\/<\/font>canvas<\/font>><\/font>\n\n<<\/font>script<\/font>><\/font>\n\n\nconst<\/font> ctx = <\/font>document<\/font>.getElementById<\/font>('meuGrafico'<\/font>);<\/font>\n\n <\/font>\/\/Registre manualmente o plugin chartjs datalabels<\/font>\n Chart.register<\/font>(ChartDataLabels<\/font>);<\/font>\n\nconst<\/font> myChart = <\/font>new<\/font> Chart<\/font>(ctx, <\/font>{<\/font>\n  type: <\/font>'bar'<\/font>,<\/font>\n  data: <\/font>{<\/font>\n    labels: <\/font>[<\/font>'Vermelho'<\/font>, <\/font>'Azul'<\/font>, <\/font>'Amarelo'<\/font>, <\/font>'Verde'<\/font>, <\/font>'Roxo'<\/font>, <\/font>'Laranja'<\/font>]<\/font>,<\/font>\n    datasets: <\/font>[{<\/font>\n      label: <\/font>'# Vota\u00e7\u00e3o'<\/font>,<\/font>\n      data: <\/font>[<\/font>12, <\/font>19, <\/font>3, <\/font>5, <\/font>2, <\/font>3]<\/font>,<\/font>\n      backgroundColor: <\/font>[<\/font>\n        <\/font>'rgba(255, 0, 0, 0.8)'<\/font>, <\/font>\/\/ Vermelho<\/font>\n        <\/font>'rgba(0, 0, 255, 0.8)'<\/font>, <\/font>\/\/ Azul<\/font>\n        <\/font>'rgba(255, 255, 0, 0.8)'<\/font>, <\/font>\/\/ Amarelo<\/font>\n        <\/font>'rgba(0, 128, 0, 0.8)'<\/font>, <\/font>\/\/ Verde<\/font>\n        <\/font>'rgba(128, 0, 128, 0.8)'<\/font>, <\/font>\/\/ Roxo<\/font>\n        <\/font>'rgba(255, 165, 0, 0.8)'<\/font> <\/font>\/\/ Laranja<\/font>\n      <\/font>]<\/font>,<\/font>\n      borderWidth: <\/font>1\n    <\/font>}]<\/font>\n  <\/font>}<\/font>,<\/font>\n\n  options: <\/font>{<\/font>\n        plugins: <\/font>{<\/font>\n           title: <\/font>{<\/font>\n                display: <\/font>true<\/font>,<\/font>\n                text: <\/font>'Cores Vota\u00e7\u00e3o'<\/font>,  <\/font>\n                color: <\/font>'blue'<\/font>,<\/font>\n                font: <\/font>{<\/font>\n                    weight: <\/font>'bold'<\/font>,<\/font>\n                    size: <\/font>20                <\/font>\n                <\/font>}<\/font>\n           <\/font>}<\/font>,<\/font>\n                <\/font>\n\n\n        datalabels: <\/font>{<\/font>\n               <\/font>\/\/ Posi\u00e7\u00e3o dos r\u00f3tulos <\/font>\n               <\/font>\/\/ (in\u00edcio, fim, centro, etc.)<\/font>\n               anchor: <\/font>'end'<\/font>,<\/font>\n               <\/font>\/\/ Alinhamento dos r\u00f3tulos <\/font>\n               <\/font>\/\/ (in\u00edcio, fim, centro, etc.)<\/font>\n               align: <\/font>'end'<\/font>,<\/font>\n               <\/font>\/\/ cores dos r\u00f3tulos<\/font>\n               color: <\/font>'blue'<\/font>,<\/font>\n               font: <\/font>{<\/font>\n                     weight: <\/font>'bold'<\/font>,<\/font>\n                     <\/font>}<\/font>,<\/font>\n               formatter: <\/font>function<\/font> <\/font>(value, context<\/font>) <\/font>{<\/font>\n                       <\/font>\/\/ Mostre o valor atual dos dados<\/font>\n                       <\/font>return<\/font> value;<\/font>\n              <\/font>}<\/font>\n           <\/font>}<\/font>\n\n     <\/font>}<\/font>\n\n\n\n <\/font>}<\/font>      <\/font>\n<\/pre>\n\n\n\n
Os valores de in\u00edcio, fim e centro podem ser alterados, respectivamente, para start<\/strong>, end<\/strong> e center<\/strong>.<\/p>\n\n\n\n
As cores do texto eu coloquei azul (blue) mas poder\u00e1 substituir por qualquer outra. Sempre em ingl\u00eas \ud83d\ude42<\/p>\n\n\n
\n
\"Mostrar
Mostrar valores no topo das barras em Chart.js<\/figcaption><\/figure><\/div>\n\n\n
Exibindo textos nos eixos horizontal e vertical<\/h3>\n\n\n\n
Para exibir um texto no eixo horizontal e vertical usamos x <\/strong>e y <\/strong>dentro de scales.<\/p>\n\n\n\n
Mais uma vez, n\u00e3o colocarei todo o c\u00f3digo:<\/p>\n\n\n\n
options: <\/font>{<\/font>\n                plugins: <\/font>{<\/font>\n                    title: <\/font>{<\/font>\n                        display: <\/font>true<\/font>,<\/font>\n                        text: <\/font>'Vota\u00e7\u00e3o Cores'<\/font>, <\/font>\/\/t\u00edtulo do gr\u00e1fico<\/font>\n                        color: <\/font>'green'<\/font>,<\/font>\n                        font: <\/font>{<\/font>\n                            weight: <\/font>'bold'<\/font>,<\/font>\n                            size: <\/font>24\n                        <\/font>}<\/font>\n                    <\/font>}<\/font>\n                <\/font>}<\/font>,<\/font>\n                scales: <\/font>{<\/font>\n                    x: <\/font>{<\/font>\n                        title: <\/font>{<\/font>\n                            display: <\/font>true<\/font>,<\/font>\n                            text: <\/font>'Cores'<\/font> <\/font>\/\/ nome do eixo horizontal ou x<\/font>\n                        <\/font>}<\/font>,<\/font>\n                        beginAtZero: <\/font>true<\/font>\n                    <\/font>}<\/font>,<\/font>\n                    y: <\/font>{<\/font>\n                        title: <\/font>{<\/font>\n                            display: <\/font>true<\/font>,<\/font>\n                            text: <\/font>'Votos'<\/font> <\/font>\/\/ nome do eixo vertical ou y<\/font>\n                        <\/font>}<\/font>,<\/font>\n                        beginAtZero: <\/font>true<\/font>\n                    <\/font>}<\/font>\n                <\/font>}<\/font>\n            <\/font>}<\/font>\n        <\/font>\n<\/pre>\n\n\n\n
Veja como ficou,<\/p>\n\n\n
\n
\"Exibindo
Exibindo textos nos eixos horizontal e vertical<\/figcaption><\/figure><\/div>","protected":false},"excerpt":{"rendered":"
Mas, afinal de contas, o que \u00e9 Chart.js?? Chart.js \u00e9 uma biblioteca JavaScript para criar gr\u00e1ficos em p\u00e1ginas da web; ele pode criar gr\u00e1ficos para serem visualizados de forma interativa, ou seja, disparando a\u00e7\u00f5es de anima\u00e7\u00f5es de acordo com cliques ou passar do mouse pelos usu\u00e1rios. Com o Chart.js, desenvolvedores podem facilmente gerar gr\u00e1ficos de…<\/p>\n
Read More “Criando Gr\u00e1ficos de Barras com Chart.js para seu Site”<\/span> »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4477],"tags":[4808,4807],"class_list":["post-15585","post","type-post","status-publish","format-standard","hentry","category-programacao-desenvolvimento","tag-chart-js","tag-grafico"],"yoast_head":"\nCriando Gr\u00e1ficos de Barras com Chart.js para seu Site - Categoria Outros<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/categoriaoutros.com.br\/?p=15585\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Criando Gr\u00e1ficos de Barras com Chart.js para seu Site - Categoria Outros\" \/>\n<meta property=\"og:description\" content=\"Mas, afinal de contas, o que \u00e9 Chart.js?? Chart.js \u00e9 uma biblioteca JavaScript para criar gr\u00e1ficos em p\u00e1ginas da web; ele pode criar gr\u00e1ficos para serem visualizados de forma interativa, ou seja, disparando a\u00e7\u00f5es de anima\u00e7\u00f5es de acordo com cliques ou passar do mouse pelos usu\u00e1rios. Com o Chart.js, desenvolvedores podem facilmente gerar gr\u00e1ficos de...Read More “Criando Gr\u00e1ficos de Barras com Chart.js para seu Site” »\" \/>\n<meta property=\"og:url\" content=\"https:\/\/categoriaoutros.com.br\/?p=15585\" \/>\n<meta property=\"og:site_name\" content=\"Categoria Outros\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/categoriaoutros\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-24T12:01:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-26T15:49:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2024\/02\/graficos.jpeg\" \/>\n<meta name=\"author\" content=\"Categoria: Outros\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CategoriaOutros\" \/>\n<meta name=\"twitter:site\" content=\"@CategoriaOutros\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Categoria: Outros\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15585#article\",\"isPartOf\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15585\"},\"author\":{\"name\":\"Categoria: Outros\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40\"},\"headline\":\"Criando Gr\u00e1ficos de Barras com Chart.js para seu Site\",\"datePublished\":\"2024-02-24T12:01:38+00:00\",\"dateModified\":\"2024-02-26T15:49:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15585\"},\"wordCount\":705,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\"},\"keywords\":[\"Chart.js\",\"gr\u00e1fico\"],\"articleSection\":[\"Programa\u00e7\u00e3o\/desenvolvimento\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/categoriaoutros.com.br\/?p=15585#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15585\",\"url\":\"https:\/\/categoriaoutros.com.br\/?p=15585\",\"name\":\"Criando Gr\u00e1ficos de Barras com Chart.js para seu Site - Categoria Outros\",\"isPartOf\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#website\"},\"datePublished\":\"2024-02-24T12:01:38+00:00\",\"dateModified\":\"2024-02-26T15:49:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15585#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/categoriaoutros.com.br\/?p=15585\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15585#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/categoriaoutros.com.br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Criando Gr\u00e1ficos de Barras com Chart.js para seu Site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#website\",\"url\":\"https:\/\/categoriaoutros.com.br\/\",\"name\":\"Categoria Outros\",\"description\":\"Assuntos Diversos\",\"publisher\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/categoriaoutros.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\",\"name\":\"Categoria Outros\",\"alternateName\":\"Categoria Outros\",\"url\":\"https:\/\/categoriaoutros.com.br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg\",\"contentUrl\":\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg\",\"width\":400,\"height\":400,\"caption\":\"Categoria Outros\"},\"image\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/categoriaoutros\",\"https:\/\/twitter.com\/CategoriaOutros\",\"https:\/\/br.pinterest.com\/CategoriaOutros\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40\",\"name\":\"Categoria: Outros\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g\",\"caption\":\"Categoria: Outros\"},\"sameAs\":[\"http:\/\/categoriaoutros.com.br\"],\"url\":\"https:\/\/categoriaoutros.com.br\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Criando Gr\u00e1ficos de Barras com Chart.js para seu Site - Categoria Outros","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/categoriaoutros.com.br\/?p=15585","og_locale":"pt_BR","og_type":"article","og_title":"Criando Gr\u00e1ficos de Barras com Chart.js para seu Site - Categoria Outros","og_description":"Mas, afinal de contas, o que \u00e9 Chart.js?? Chart.js \u00e9 uma biblioteca JavaScript para criar gr\u00e1ficos em p\u00e1ginas da web; ele pode criar gr\u00e1ficos para serem visualizados de forma interativa, ou seja, disparando a\u00e7\u00f5es de anima\u00e7\u00f5es de acordo com cliques ou passar do mouse pelos usu\u00e1rios. Com o Chart.js, desenvolvedores podem facilmente gerar gr\u00e1ficos de...Read More “Criando Gr\u00e1ficos de Barras com Chart.js para seu Site” »","og_url":"https:\/\/categoriaoutros.com.br\/?p=15585","og_site_name":"Categoria Outros","article_publisher":"https:\/\/www.facebook.com\/categoriaoutros","article_published_time":"2024-02-24T12:01:38+00:00","article_modified_time":"2024-02-26T15:49:18+00:00","og_image":[{"url":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2024\/02\/graficos.jpeg"}],"author":"Categoria: Outros","twitter_card":"summary_large_image","twitter_creator":"@CategoriaOutros","twitter_site":"@CategoriaOutros","twitter_misc":{"Escrito por":"Categoria: Outros","Est. tempo de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/categoriaoutros.com.br\/?p=15585#article","isPartOf":{"@id":"https:\/\/categoriaoutros.com.br\/?p=15585"},"author":{"name":"Categoria: Outros","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40"},"headline":"Criando Gr\u00e1ficos de Barras com Chart.js para seu Site","datePublished":"2024-02-24T12:01:38+00:00","dateModified":"2024-02-26T15:49:18+00:00","mainEntityOfPage":{"@id":"https:\/\/categoriaoutros.com.br\/?p=15585"},"wordCount":705,"commentCount":1,"publisher":{"@id":"https:\/\/categoriaoutros.com.br\/#organization"},"keywords":["Chart.js","gr\u00e1fico"],"articleSection":["Programa\u00e7\u00e3o\/desenvolvimento"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/categoriaoutros.com.br\/?p=15585#respond"]}]},{"@type":"WebPage","@id":"https:\/\/categoriaoutros.com.br\/?p=15585","url":"https:\/\/categoriaoutros.com.br\/?p=15585","name":"Criando Gr\u00e1ficos de Barras com Chart.js para seu Site - Categoria Outros","isPartOf":{"@id":"https:\/\/categoriaoutros.com.br\/#website"},"datePublished":"2024-02-24T12:01:38+00:00","dateModified":"2024-02-26T15:49:18+00:00","breadcrumb":{"@id":"https:\/\/categoriaoutros.com.br\/?p=15585#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/categoriaoutros.com.br\/?p=15585"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/categoriaoutros.com.br\/?p=15585#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/categoriaoutros.com.br\/"},{"@type":"ListItem","position":2,"name":"Criando Gr\u00e1ficos de Barras com Chart.js para seu Site"}]},{"@type":"WebSite","@id":"https:\/\/categoriaoutros.com.br\/#website","url":"https:\/\/categoriaoutros.com.br\/","name":"Categoria Outros","description":"Assuntos Diversos","publisher":{"@id":"https:\/\/categoriaoutros.com.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/categoriaoutros.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/categoriaoutros.com.br\/#organization","name":"Categoria Outros","alternateName":"Categoria Outros","url":"https:\/\/categoriaoutros.com.br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/","url":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg","contentUrl":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg","width":400,"height":400,"caption":"Categoria Outros"},"image":{"@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/categoriaoutros","https:\/\/twitter.com\/CategoriaOutros","https:\/\/br.pinterest.com\/CategoriaOutros\/"]},{"@type":"Person","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40","name":"Categoria: Outros","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g","caption":"Categoria: Outros"},"sameAs":["http:\/\/categoriaoutros.com.br"],"url":"https:\/\/categoriaoutros.com.br\/?author=1"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/15585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15585"}],"version-history":[{"count":17,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/15585\/revisions"}],"predecessor-version":[{"id":15617,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/15585\/revisions\/15617"}],"wp:attachment":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}