🎯 Quando Usar Cada Tipo de Grafico
Escolha certa para cada dado
Cada tipo de grafico serve para um proposito especifico. Graficos de linha mostram tendencias, barras comparam categorias, pizza mostra proporcoes. Escolher o tipo errado pode distorcer completamente a mensagem dos dados.
O grafico errado pode levar a interpretacoes equivocadas. Um grafico de pizza com 15 fatias e ilegivel. Um grafico de linha para dados categoricos nao faz sentido. A escolha correta comunica instantaneamente.
📋 Guia de Selecao de Graficos
⚠️ Regras de Ouro
- • Pizza com mais de 5 fatias
- • 3D em qualquer grafico (distorce)
- • Eixo Y nao comecando em zero (barras)
- • Cores aleatorias sem significado
- • Linha pode ter eixo Y truncado
- • Menos e mais - remova elementos desnecessarios
- • Titulo claro explicando o grafico
- • Cores consistentes = significados consistentes
💡 Dica Pratica
Teste do relance: Se alguem nao conseguir entender a mensagem principal do seu grafico em 5 segundos olhando rapidamente, ele precisa ser simplificado ou o tipo esta errado.
📦 Chart.js - Setup e Configuracao
A biblioteca mais popular para graficos web
Chart.js e a biblioteca de graficos mais popular para web. Leve (~60KB), responsiva, animada e com 8 tipos de graficos nativos. Perfeita para dashboards por ser simples de configurar e altamente customizavel.
E o padrao da industria para graficos em dashboards. Documentacao excelente, comunidade ativa e compativel com qualquer framework (React, Vue, Angular, vanilla JS).
⚖️ Comparacao de Bibliotecas
| Biblioteca | Tamanho | Melhor Para | Curva |
|---|---|---|---|
| Chart.js | ~60KB | Dashboards gerais | Facil |
| ApexCharts | ~450KB | Graficos interativos | Media |
| D3.js | ~240KB | Visualizacoes custom | Dificil |
| Recharts | ~150KB | React apps | Facil |
💻 Codigo: Setup Basico Chart.js
<!-- 1. Incluir Chart.js via CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- 2. Canvas para o grafico -->
<div class="bg-dark-800 rounded-xl p-6 border border-dark-600">
<canvas id="myChart" class="w-full" style="height: 300px"></canvas>
</div>
<!-- 3. Configuracao do Grafico -->
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line', // bar, pie, doughnut, radar, polarArea...
data: {
labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun'],
datasets: [{
label: 'Vendas 2024',
data: [12000, 19000, 15000, 22000, 18000, 25000],
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
tension: 0.4, // curva suave
fill: true, // preencher area
pointRadius: 4,
pointHoverRadius: 6
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: '#1f2937',
titleColor: '#f3f4f6',
bodyColor: '#9ca3af',
borderColor: '#374151',
borderWidth: 1
}
},
scales: {
y: {
beginAtZero: true,
grid: { color: '#374151' }
},
x: {
grid: { display: false }
}
}
}
});
</script>
💡 Dica Pratica
Mantenha consistencia: Configure os defaults do Chart.js uma vez no inicio do projeto. Assim todos os graficos terao o mesmo estilo automaticamente, sem precisar repetir configuracoes.
📉 Graficos de Linha e Area
Tendencias ao longo do tempo
Graficos de linha mostram tendencias ao longo do tempo. Graficos de area sao linhas com preenchimento, uteis para mostrar volume ou valores acumulados.
90% dos dashboards precisam mostrar "como algo mudou ao longo do tempo". Vendas mensais, usuarios ativos, temperatura - tudo e tendencia. Dominar graficos de linha e fundamental.
🔍 Anatomia do Grafico de Linha
Titulo do Grafico
│
100 ┤ ●──── Tooltip (hover)
80 ┤ ╱╲ ╱
60 ┤ ╱╲ ╱ ╲ ╱ ← Linha principal
40 ┤ ╱ ╲╱ ╲ ╱
20 ┤ ╱ ╲──╱ ← Area preenchida
0 ┼──┬──┬──┬──┬──┬──┬──
J F M A M J J ← Eixo X (tempo)
↑
Eixo Y (valores)
Elementos:
• Linha: dados principais (destaque)
• Pontos: valores individuais (opcional)
• Grid: linhas de referencia (discretas)
• Eixo Y: escala (PODE truncar em linhas)
• Eixo X: tempo ou categorias ordenadas
• Area: preenchimento para volume
• Legenda: necessaria se multiplas series
🎨 Variacoes de Graficos de Linha
Uma serie de dados, foco na tendencia.
Enfatiza volume/magnitude dos valores.
Comparar series. Max 4-5 linhas.
Mostra composicao do total ao longo do tempo.
💻 Codigo: Linha com Multiplas Series
new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun'],
datasets: [
{
label: 'Vendas 2024',
data: [12, 19, 15, 22, 18, 25],
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
tension: 0.4,
fill: true,
borderWidth: 3 // linha principal mais grossa
},
{
label: 'Vendas 2023',
data: [10, 15, 12, 18, 14, 20],
borderColor: '#6b7280',
borderDash: [5, 5], // linha tracejada
tension: 0.4,
fill: false,
borderWidth: 2
}
]
},
options: {
plugins: {
legend: {
position: 'top',
labels: { color: '#9ca3af' }
}
}
}
});
✅ Fazer vs ❌ Evitar
- • Maximo 4-5 linhas por grafico
- • Linha principal mais grossa
- • Cores distintas e acessiveis
- • Truncar eixo Y para destacar variacoes
- • 10+ linhas sobrepostas
- • Cores muito similares
- • Pontos muito grandes
- • Linha para dados nao-temporais
📊 Graficos de Barra e Histogramas
Comparacao entre categorias
Graficos de barra comparam valores entre categorias. Barras verticais para poucas categorias, horizontais para muitas ou labels longos. Histogramas mostram distribuicao de frequencia.
Comparacao e essencial em dashboards. "Qual produto vende mais?", "Qual regiao performa melhor?". Barras respondem essas perguntas instantaneamente.
📐 Vertical vs Horizontal
100 ┤ ██
75 ┤ ██ ██
50 ┤ ██ ██ ██
25 ┤ ██ ██ ██ ██
0 ┼──┴──┴──┴──┴──
A B C D
Melhor para: poucas categorias (4-8), labels curtos, foco na altura.
Produto Alpha │████████████│ Produto Beta │█████████│ Produto Gamma │███████│ Produto Delta │█████│
Melhor para: muitas categorias, labels longos, ranking/ordenacao.
💻 Codigo: Grafico de Barras Horizontal
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Produto A', 'Produto B', 'Produto C', 'Produto D'],
datasets: [{
label: 'Vendas',
data: [120, 190, 80, 140],
backgroundColor: [
'rgba(59, 130, 246, 0.8)', // azul
'rgba(16, 185, 129, 0.8)', // verde
'rgba(245, 158, 11, 0.8)', // amarelo
'rgba(139, 92, 246, 0.8)' // roxo
],
borderRadius: 8,
borderSkipped: false
}]
},
options: {
indexAxis: 'y', // horizontal (remover para vertical)
plugins: {
legend: { display: false }
},
scales: {
x: {
beginAtZero: true, // SEMPRE comece em zero!
grid: { color: '#374151' }
},
y: {
grid: { display: false }
}
}
}
});
⚠️ Regra Critica: Comece em Zero!
98 ┤██ 97 ┤█ 96 ┤█ A B
Parece que A e 100% maior que B
100┤██████████ 50┤█████ 0┤ A B
Mostra diferenca real de ~2%
🥧 Graficos de Pizza e Donut
Proporcoes de um todo
Graficos de pizza e donut mostram proporcoes de um todo. Donut e preferido por permitir colocar informacao no centro. Limitados a maximo 5 categorias para serem efetivos.
Proporcoes sao frequentes: market share, distribuicao de vendas, alocacao de orcamento. Mas pizza e frequentemente mal usado - saber quando NAO usar e tao importante quanto saber usar.
🎯 Quando Usar (e Quando NAO Usar)
- • Partes de um todo = 100%
- • 2-5 categorias apenas
- • Uma fatia e claramente dominante
- • Comparacao exata nao e necessaria
- • Mais de 5 categorias
- • Fatias de tamanho muito similar
- • Comparacao precisa necessaria
- • Dados temporais (use linha)
⚖️ Donut vs Pizza
Centro util para KPI principal ou total. Mais moderno visualmente.
Centro desperdicado. Use apenas se realmente precisar mostrar "fatias".
💻 Codigo: Donut com Centro Customizado
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Desktop', 'Mobile', 'Tablet'],
datasets: [{
data: [55, 35, 10],
backgroundColor: [
'#3b82f6', // azul
'#10b981', // verde
'#f59e0b' // amarelo
],
borderWidth: 0,
cutout: '70%' // tamanho do buraco central
}]
},
options: {
plugins: {
legend: {
position: 'bottom',
labels: { color: '#9ca3af', padding: 20 }
}
}
}
});
// Para adicionar texto no centro, use plugin ou HTML overlay
💡 Dica Pratica
Alternativa mais eficiente: Considere usar barras horizontais ordenadas em vez de pizza. Barras sao mais precisas para comparacao e funcionam com qualquer numero de categorias.
🎨 Estilizacao e Temas para Graficos
Consistencia visual em dark mode
Estilizar graficos significa adapta-los ao design system do dashboard: cores, fontes, bordas, sombras. Inclui configurar temas claros e escuros, tooltips customizados e animacoes.
Graficos com estilo padrao quebram a harmonia visual. Um grafico branco num dashboard dark mode e jarring. Consistencia visual aumenta a confianca e profissionalismo.
🎨 Paleta de Cores para Dashboards
💻 Codigo: Tema Dark Mode Global
// Configurar ANTES de criar qualquer grafico
// Isso define o tema para TODOS os graficos
// Cores de texto e linhas
Chart.defaults.color = '#9ca3af'; // texto neutro
Chart.defaults.borderColor = '#374151'; // linhas de grid
// Tipografia
Chart.defaults.font.family = "'Inter', sans-serif";
Chart.defaults.font.size = 12;
// Tooltips customizados
Chart.defaults.plugins.tooltip.backgroundColor = '#1f2937';
Chart.defaults.plugins.tooltip.titleColor = '#f3f4f6';
Chart.defaults.plugins.tooltip.bodyColor = '#9ca3af';
Chart.defaults.plugins.tooltip.borderColor = '#374151';
Chart.defaults.plugins.tooltip.borderWidth = 1;
Chart.defaults.plugins.tooltip.padding = 12;
Chart.defaults.plugins.tooltip.cornerRadius = 8;
Chart.defaults.plugins.tooltip.displayColors = true;
// Animacoes (opcional - desativar para performance)
Chart.defaults.animation.duration = 750;
Chart.defaults.animation.easing = 'easeOutQuart';
// Paleta padrao de cores
const chartColors = {
primary: '#3b82f6',
success: '#10b981',
warning: '#f59e0b',
danger: '#ef4444',
info: '#8b5cf6',
neutral: '#6b7280'
};
💬 Exemplo: Tooltip Dark Mode
Tooltip com fundo escuro, bordas sutis e cores consistentes
💡 Dica Pratica
Crie um arquivo de configuracao: Coloque todos os defaults do Chart.js em um arquivo separado (ex: chart-theme.js) e importe antes de criar qualquer grafico. Isso garante consistencia automatica em todo o dashboard.