Criando Gráficos de Barras com Chart.js para seu Site

Mas, afinal de contas, o que é Chart.js?? Chart.js é uma biblioteca JavaScript para criar gráficos em páginas da web; ele pode criar gráficos para serem visualizados de forma interativa, ou seja, disparando ações de animações de acordo com cliques ou passar do mouse pelos usuários.

Criando Gráficos com Chart.js para seu Site

Com o Chart.js, desenvolvedores podem facilmente gerar gráficos de barras, linhas, pizza e radar, entre outros, para apresentar dados de forma clara e atraente. A biblioteca é bastante flexível e personalizável, o que a torna uma escolha popular para a visualização de dados em projetos web.

Outro fator importante é o fato de existir milhares de tutoriais e documentação na internet e isso é uma grande vantagem por não deixar o desenvolvedor sem suporte.

Criando o primeiro gráfico e explicando com passo a passo

Estou levando em conta que a página, seja .html ou .php etc, está em branco, sem nada digitado.

#1 Crie uma div com um nome de identificação qualquer. Meu nome identificador será meuGrafico:

<div>
  <canvas id="meuGrafico"></canvas>
</div>

Precisamos ter a canva(ou tela) acima em nossa página. É dentro dessa div que o gráfico irá aparecer. É recomendado criar uma div como essa por motivo de responsividade.

#2 Crie um link (CDN) que trará todos os recursos necessários para criação dos gráficos Chart.js para dentro da nossa página:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Pode colocar a linha acima entre as tags <head> e </head> do HTML, se preferir.

#3 Agora vem o código com os dados que aparecerão dentro do gráfico. Logicamente que em uma situação real esses dados serão trazidos de um banco de dados. Estou falando dos dados dentro de Labels, Label e data.

<script>
  const ctx = document.getElementById('meuGrafico');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Vermelho', 'Azul', 'Amarelo', 'Verde', 'Roxo', 'Laranja'],
      datasets: [{
        label: '# Votação',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

Agora você poderá abrir o site no navegador e ver o gráfico aparecer.

Inserindo título no gráfico

Podemos usar titles para inserirmos títulos dentro do nosso gráfico. Postarei apenas a parte das opções:

 options: {
        plugins: {
           title: {
                display: true,
                text: 'Cores Votação',  
                color: 'blue',
                font: {
                    weight: 'bold',
                    size: 20                
                }
           },
        }       

 }

Veja o resultado:

Alterando as cores das barras

Na imagem acima pode ver que as barras estão com cores diferentes e variadas. Se quiser alterar as cores das barras, que acima estão todas azuis, basta fazer da seguinte forma,

<script>

const ctx = document.getElementById('meuGrafico');

const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Vermelho', 'Azul', 'Amarelo', 'Verde', 'Roxo', 'Laranja'],
    datasets: [{
      label: '# Votação',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 0, 0, 0.8)', // Vermelho
        'rgba(0, 0, 255, 0.8)', // Azul
        'rgba(255, 255, 0, 0.8)', // Amarelo
        'rgba(0, 128, 0, 0.8)', // Verde
        'rgba(128, 0, 128, 0.8)', // Roxo
        'rgba(255, 165, 0, 0.8)' // Laranja
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        max: 20 // Ajusta o valor máximo do eixo Y
      }
    }
  }
});

</script>

Veja o resultado:

Adicionando outro conjunto de dados (outras barras)

Se quisermos criar outras barras para cada cor, por exemplo, uma segunda votação, podemos fazer da seguinte forma, criando outro data ou conjunto de dados:

const ctx = document.getElementById('meuGrafico');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Vermelho', 'Azul', 'Amarelo', 'Verde', 'Roxo', 'Laranja'],
    datasets: [
      {
        label: '# Votação 1',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# Votação 2',
        data: [8, 14, 7, 4, 1, 2],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        max: 20 // Ajusta o valor máximo do eixo Y
      }
    }
  }
});

Veja o resultado,

Adicionando outro conjunto de dados (outras barras)

Colocando uma linha limite para ver quais barras ultrapassaram

Podemos colocar um limite para sabermos quais barras ou votações ultrapassaram ou ficaram abaixo da expectativa:

const ctx = document.getElementById('meuGrafico');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Vermelho', 'Azul', 'Amarelo', 'Verde', 'Roxo', 'Laranja'],
    datasets: [
      {
        label: '# Votação 1',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
        'rgba(255, 165, 0, 0.8)' // Laranja
      ],
        borderWidth: 1
      },
      {
        label: '# Votação 2',
        data: [8, 14, 7, 4, 1, 2],
        backgroundColor: [
        'rgba(55, 165, 60, 0.8)' // Laranja
      ],

        borderWidth: 1
      },
      {
        type: 'line', // Tipo de linha
        label: '# Média',
        data: [10, 10, 10, 10, 10, 10], // Valores da linha horizontal
        borderColor: 'red', // Cor da linha
        borderDash: [5, 5],
        borderWidth: 1, // Espessura da linha
        fill: false, // Não preenche a área abaixo da linha
        pointRadius: 0, // Esconde os pontos da linha
        spanGaps: true, // Faz a linha se estender por toda a área do gráfico
      }
    ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        max: 20 // Ajusta o valor máximo do eixo Y
      }
    }
  }
});

Colocando uma linha limite para ver quais barras ultrapassaram

Uma outra forma de colocar uma linha horizontam em um ponto específico é através de anotações. Mas, para isso precisaremos do CDN da biblioteca. Coloque entre as tags <head> e </head>

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>

Agora acrescente em opções,

plugins: {
        annotation: {
          annotations: [{
            type: 'line',
            mode: 'horizontal',
            scaleID: 'y',
            value: 10,
            borderColor: 'rgb(255, 0, 0)',
            borderWidth: 2,
            label: {
              content: 'Label na Barra',
              enabled: true
            }
          }]
        }
      }

O código completo ficará assim,

<script>
  const ctx = document.getElementById('meuGrafico');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Vermelho', 'Azul', 'Amarelo', 'Verde', 'Roxo', 'Laranja'],
      datasets: [{
        label: '# Votação',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      },
      plugins: {
        annotation: {
          annotations: [{
            type: 'line',
            mode: 'horizontal',
            scaleID: 'y',
            value: 10,
            borderColor: 'rgb(255, 0, 0)',
            borderWidth: 2,
            label: {
              content: 'Label na Barra',
              enabled: true
            }
          }]
        }
      }
    }
  });
</script>

E esse seria o resultado:

Mostrar valores no topo das barras em Chart.js

Antes de tudo, adicione o link https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels abaixo do link principal, entre as tags <head> e <head>

Ficará assim:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

Logo abaixo de const ctx = document.getElementById(‘meuGrafico’); digite Chart.register(ChartDataLabels);

.....
const ctx = document.getElementById('meuGrafico');

 //Registre manualmente o plugin chartjs datalabels
 Chart.register(ChartDataLabels);
......

Dentro da seção options, digite as linhas abaixo pra nosso datalabels

datalabels: {
               // Posição dos rótulos 
               // (início, fim, centro, etc.)
               anchor: 'end',
               // Alinhamento dos rótulos 
               // (início, fim, centro, etc.)
               align: 'end',
               // cores dos rótulos
               color: 'blue',
               font: {
                     weight: 'bold',
                     },
               formatter: function (value, context) {
                       // Mostre o valor atual dos dados
                       return value;
              }
           }

Veja o código completo e imagem do resultado:

<canvas id="meuGrafico"></canvas>

<script>


const ctx = document.getElementById('meuGrafico');

 //Registre manualmente o plugin chartjs datalabels
 Chart.register(ChartDataLabels);

const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Vermelho', 'Azul', 'Amarelo', 'Verde', 'Roxo', 'Laranja'],
    datasets: [{
      label: '# Votação',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 0, 0, 0.8)', // Vermelho
        'rgba(0, 0, 255, 0.8)', // Azul
        'rgba(255, 255, 0, 0.8)', // Amarelo
        'rgba(0, 128, 0, 0.8)', // Verde
        'rgba(128, 0, 128, 0.8)', // Roxo
        'rgba(255, 165, 0, 0.8)' // Laranja
      ],
      borderWidth: 1
    }]
  },

  options: {
        plugins: {
           title: {
                display: true,
                text: 'Cores Votação',  
                color: 'blue',
                font: {
                    weight: 'bold',
                    size: 20                
                }
           },
                


        datalabels: {
               // Posição dos rótulos 
               // (início, fim, centro, etc.)
               anchor: 'end',
               // Alinhamento dos rótulos 
               // (início, fim, centro, etc.)
               align: 'end',
               // cores dos rótulos
               color: 'blue',
               font: {
                     weight: 'bold',
                     },
               formatter: function (value, context) {
                       // Mostre o valor atual dos dados
                       return value;
              }
           }

     }



 }

Os valores de início, fim e centro podem ser alterados, respectivamente, para start, end e center.

As cores do texto eu coloquei azul (blue) mas poderá substituir por qualquer outra. Sempre em inglês 🙂

Mostrar valores no topo das barras em Chart.js

Exibindo textos nos eixos horizontal e vertical

Para exibir um texto no eixo horizontal e vertical usamos x e y dentro de scales.

Mais uma vez, não colocarei todo o código:

options: {
                plugins: {
                    title: {
                        display: true,
                        text: 'Votação Cores', //título do gráfico
                        color: 'green',
                        font: {
                            weight: 'bold',
                            size: 24
                        }
                    }
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Cores' // nome do eixo horizontal ou x
                        },
                        beginAtZero: true
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'Votos' // nome do eixo vertical ou y
                        },
                        beginAtZero: true
                    }
                }
            }

Veja como ficou,

Exibindo textos nos eixos horizontal e vertical