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
O 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.jsExemplo 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 linhaspie– Pizzadoughnut– Rosquinharadar– RadarpolarArea– Área polarscatter– Dispersãobubble– 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! 🚀