Chart.js

Um elemento <canvas>, uma tag de script e um objeto de configuração bastam para o Chart.js desenhar um gráfico na página. A biblioteca é escrita em JavaScript e oferece oito tipos de gráfico, todos animados e personalizáveis. Quando a janela muda de tamanho, ela redesenha o gráfico na nova escala.

Para que serve

• Exibir vendas, acessos ou qualquer série numérica num painel web, em linha, barra ou outro dos tipos disponíveis.
• Misturar barras e linhas no mesmo gráfico para separar visualmente dois conjuntos de dados.
• Plotar dados esparsos em eixo de data e hora, escala logarítmica ou escala criada por você.
• Animar a transição quando os dados, as cores ou os conjuntos mudam.
• Enxugar o pacote final registrando só os componentes que a página usa.

Como começar

A documentação mostra a instalação pelo npm ou por CDN. A forma mínima, por CDN, põe na página:

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

Depois, um script chama new Chart(ctx, {...}) com o tipo ('bar', por exemplo), os rótulos e os valores. O guia recomenda colocar o canvas dentro de um contêiner próprio, para o redimensionamento funcionar bem. A documentação atual cobre a versão 4 e explica a integração com bundlers e frameworks de front-end.

Licença e custo

O copyright é dos Chart.js Contributors. A licença MIT permite modificar e até vender a biblioteca, e exige que o aviso de copyright e o texto da licença acompanhem todas as cópias ou partes substanciais do software. O projeto se apresenta como mantido pela comunidade, e o site não oferece plano pago nem serviço hospedado.

Quando vale a pena

O Chart.js se dá bem em painéis e relatórios internos com poucos gráficos. A configuração é curta, e as animações já vêm ligadas. Se você precisa de mais de 20 tipos de gráfico, renderização em SVG ou volumes de dados muito grandes, o Apache ECharts cobre mais casos, com uma API maior para aprender. Exibir dados e interpretá-los são tarefas distintas, e o texto sobre visualização e análise de dados trata dessa diferença.