8 Bibliotecas de JavaScript para Gráficos – Parte 1: Chart.js

Olá comunidade! 🥰

Hoje estamos começando uma série de artigos incrível!

Visualizações de dados são essenciais em praticamente qualquer aplicação moderna, seja em dashboards, relatórios, monitoramento ou até mesmo em sistemas educacionais.

O ecossistema JavaScript oferece dezenas de bibliotecas que facilitam a criação de gráficos bonitos e interativos com poucas linhas de código.

Nesta série de artigos, vamos explorar 8 bibliotecas incríveis de JavaScript para gráficos, desde as mais simples e plug-and-play até ferramentas mais customizáveis e poderosas.

Neste primeiro post, vamos conhecer o Chart.js, uma das opções mais populares e acessíveis para quem quer começar a criar gráficos rapidamente no frontend.


As bibliotecas que vamos conhecer

Aqui estão as 8 bibliotecas que vamos explorar na série:

1. Chart.js (➡️ neste post)

Gráficos simples e bonitos com poucas linhas de código. Ideal para quem quer resultados rápidos e eficazes.

2. Recharts

Baseado em React e D3. Permite criar gráficos declarativos usando componentes JSX. Ótimo para projetos React modernos.

3. ECharts

Biblioteca da Apache com suporte a visualizações interativas e profissionais. Muito usada em dashboards robustos.

4. D3.js

Uma biblioteca poderosa de visualização em JavaScript. Flexível e customizável, mas com curva de aprendizado maior.

5. Visx (Airbnb)

Combina o poder do D3 com a estrutura de componentes React. Ideal para quem quer controle visual e modularidade.

6. Zdog

Crie elementos gráficos e animações 3D com estilo “desenho animado”. Leve e divertida para projetos criativos.

7. P5.js

Foco em arte generativa e visualizações criativas. Muito usada para fins educativos e projetos interativos.

8. Mermaid

Gere fluxogramas, diagramas de classe, Gantt e mais usando texto simples (Markdown-style). Perfeito para documentação técnica.


Parte 1: Começando com Chart.js

Chart.js é uma biblioteca leve, de código aberto e com uma API muito amigável. Com apenas algumas linhas de JavaScript, é possível gerar gráficos responsivos de vários tipos, como barras, linhas, pizza, radar, polar area, entre outros.

Vantagens:

✅ Simples de usar
✅ Responsivo por padrão
✅ Belos estilos automáticos
✅ Suporte a plugins e personalizações
✅ Documentação excelente

Como instalar o Chart.js

Você pode incluir o Chart.js via CDN (para projetos simples) ou instalar via npm/yarn (para projetos com bundlers).

1. Usando CDN

CDN (Content Delivery Network) é uma rede de servidores distribuídos pelo mundo que hospeda arquivos estáticos, como bibliotecas JavaScript, e os entrega rapidamente ao navegador.

Quando incluimos uma lib via CDN, estamos dizendo: “Carregue o Chart.js direto de um servidor otimizado, sem precisar baixar ou instalar no projeto”.

Basta incluir essa linha na sua aplicação:

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

2. Instalando via npm

Instale com o comando:

npm install chart.js

Exemplo básico: gráfico de barras

Vamos criar um gráfico de barras com dados fictícios de vendas mensais:

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

<canvas id="myChart" width="400" height="200"></canvas>

<script>
  const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril'],
      datasets: [{
        label: 'Vendas (R$)',
        data: [1200, 1900, 3000, 2500],
        backgroundColor: '#4CAF50'
      }]
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

O resultado será:

Outros tipos de gráficos suportados

Basta mudar a propriedade type para criar outros gráficos:

  • line – Gráfico de linhas
  • pie – Pizza
  • doughnut – Rosquinha
  • radar – Radar
  • polarArea – Área polar
  • scatter – Dispersão
  • bubble – Bolhas

Abaixo um exemplo de gráfico de radar. Basta criar um arquito html, importar a biblioteca via CDN e no <body>, adicionar (dados fictícios):

<body>
  <h2>Habilidades de uma Dev Frontend</h2>
  <canvas id="radarChart"></canvas>

  <script>
    const ctx = document.getElementById('radarChart').getContext('2d');

    const radarChart = new Chart(ctx, {
      type: 'radar',
      data: {
        labels: ['HTML', 'CSS', 'JavaScript', 'React', 'Acessibilidade', 'Performance'],
        datasets: [{
          label: 'Nível de Habilidade',
          data: [8, 7, 9, 6, 5, 7],
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          borderColor: 'rgba(54, 162, 235, 1)',
          pointBackgroundColor: 'rgba(54, 162, 235, 1)',
          borderWidth: 2
        }]
      },
      options: {
        responsive: true,
        scales: {
          r: {
            angleLines: { display: true },
            suggestedMin: 0,
            suggestedMax: 10
          }
        },
        plugins: {
          legend: { position: 'top' },
          title: {
            display: false
          }
        }
      }
    });
  </script>
</body>

Resultado:

Habilidades de uma Dev Frontend

Personalizações avançadas

O Chart.js permite:

  • Tooltips customizadas
  • Cores por segmento
  • Animações
  • Eventos de clique
  • Plugins (ex: salvar como imagem)

Links úteis

Conclusão

Se você está começando a trabalhar com gráficos em JavaScript, o Chart.js é uma das opções mais acessíveis para projetos web. Simples, direto e com um visual agradável por padrão.

No próximo artigo da série, vamos explorar o Recharts, uma alternativa moderna e declarativa para quem usa React.

Não perca! 🚀