Criando Gráficos com a Biblioteca Chart.js

Introdução

A visualização de dados é uma ferramenta poderosa para entender rapidamente informações complexas.

Neste artigo, vamos explorar como criar um gráfico de pizza usando Chart.js, uma biblioteca popular para gráficos em JavaScript.

Código Pronto para Uso

Aqui está o código completo necessário para criar um gráfico de pizza utilizando a biblioteca Chart.js. Esse código cria um gráfico que mostra as vendas de cinco produtos diferentes. Simplesmente copie e cole esse código em seu projeto HTML para começar a visualizar seus dados de vendas de forma gráfica.

<canvas id="meuGrafico" style="aspect-ratio: 16/9; width: 100%; height: 50%; padding: 20px; border: 1px solid #ddd; border-radius: 10px"></canvas>

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

<script>
  const ctx = document.getElementById('meuGrafico').getContext('2d');
  const meuGrafico = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ['Produto A', 'Produto B', 'Produto C', 'Produto D', 'Produto E'],
      datasets: [{
        label: 'Vendas',
        data: [12500, 10000, 3000, 5000, 8000],
      }]
    },
    options: {
      plugins: {
        tooltip: {
          callbacks: {
            label: context => {
              return ' R$ ' + context.parsed.toLocaleString('pt-BR', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
              });
            }
          }
        },
        legend: {
          position: 'left',
          labels: {
            font: { size: 18 }
          },
        },
        title: {
          display: true,
          text: 'Total de Vendas por Produto',
          font: { size: 24 },
          padding: { bottom: 30 }
        }
      },
      responsive: false,
      maintainAspectRatio: true
    }
  });
</script>

Demonstração

Explicando o Código

Vamos detalhar cada parte do código para entender como o gráfico é criado e personalizado.

Elemento Canvas

O elemento <canvas> é o local no HTML onde o gráfico será desenhado. Definimos seu ID, dimensões e estilo básico aqui.

<canvas id="meuGrafico" style="aspect-ratio: 16/9; width: 100%; height: 50%; padding: 20px; border: 1px solid #ddd; border-radius: 10px"></canvas>

Inclusão da Biblioteca Chart.js

Para utilizar o Chart.js, primeiro precisamos incluir a biblioteca no nosso documento HTML. Isso é feito através da tag <script>, referenciando o CDN do Chart.js.

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

Inicialização do Gráfico

Para iniciar o gráfico, primeiro acessamos o elemento canvas pelo ID e obtemos seu contexto '2d'. Isso nos permite usar o Chart.js para desenhar o gráfico de pizza. A função new Chart() é chamada com esse contexto e um objeto de configuração, que detalha o tipo de gráfico ('pie'), os dados apresentados e as opções de estilo.

const ctx = document.getElementById('meuGrafico').getContext('2d');
const meuGrafico = new Chart(ctx, {
  type: 'pie',
  data: {
    // Dados do gráfico
  },
  options: {
    // Opções de personalização
  }
});

Série de Dados

A série de dados é especificada dentro da propriedade data do objeto de configuração do gráfico. Aqui definimos as categorias (labels) e os valores correspondentes (data) para cada segmento do gráfico de pizza. Cada categoria representa um produto, e o valor associado, suas vendas.

data: {
  labels: ['Produto A', 'Produto B', 'Produto C', 'Produto D', 'Produto E'],
  datasets: [{
    label: 'Vendas',
    data: [12500, 10000, 3000, 5000, 8000],
  }]
}

Personalização de Tooltips

As tooltips são pequenas caixas de informação que aparecem quando o usuário passa o mouse sobre um segmento do gráfico. A personalização das tooltips permite exibir os valores de forma mais clara e formatada, como no caso abaixo, em que os valores são exibidos no padrão monetário brasileiro.

plugins: {
    tooltip: {
        callbacks: {
            label: context => {
                return ' R$ ' + context.parsed.toLocaleString('pt-BR', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }
        }
    },
}

Configuração da Legenda e do Título

Configurar a legenda e o título ajuda a tornar o gráfico mais informativo e fácil de entender. A posição da legenda, o tamanho da fonte das labels e a personalização do título são definidos nas opções do gráfico, sob a propriedade plugins.

plugins: {
    legend: {
        position: 'left',
        labels: {
            font: { size: 18 }
        },
    },
    title: {
        display: true,
        text: 'Total de Vendas por Produto',
        font: { size: 24 },
        padding: { bottom: 30 }
    }
}

Conclusão

A criação de um gráfico de pizza com Chart.js foi detalhada passo a passo, desde a estruturação do elemento canvas até a personalização avançada do gráfico. Esse exemplo ilustra a simplicidade e flexibilidade da biblioteca Chart.js para visualização de dados.

Para explorar mais opções de gráficos e personalizações, visite a documentação oficial do Chart.js.