Gráfico De Linhas Simples

Construindo gráficos de linhas que não vão te frustrar

Eu passei dias tentando fazer um gráfico de linhas simples renderizar direito em SVG puro, com dados atualizados em tempo real de uma API que retornava timestamps desorganizadores. O resultado final nem parecia um gráfico de linhas simples no início, só linhas tortas sobrepostas que ninguém conseguia ler. A solução mais direta foi abandonar a abordagem ingênua e tratar os dados antes de desenhar.

O que é e quando usar um gráfico de linhas simples

Um gráfico de linhas simples é basicamente dois eixos e pontos conectados por segmentos retos. Ele serve para mostrar tendência ao longo de uma variável contínua, quase sempre tempo. Se você tem apenas uma sequência numérica e quer ver se ela sobe, desce ou fica plana, esse é o formato certo. Não tente usar para comparar categorias discretas — aí o gráfico de barras já é mais honesto. O que muita gente não conta é que a escolha do interpolador faz mais diferença do que a paleta de cores. Linhas retas entre pontos são o padrão, mas em séries com alta volatilidade isso cria um visual serrilhado que distorce a percepção da tendência real. Usar interpolação catmull-rom ou cardinal com um alpha baixo (em torno de 0,3) suaviza sem esconder os dados. Eu descobri isso na prática depois que um cliente reclamou que o pico de vendas parecia muito mais acentuado no gráfico do que nos números brutos.

Dados e preparação

Antes de qualquer coisa, organize seus dados em pares ordenados: coordenadas X e Y. O eixo X costuma ser temporal, mas pode ser qualquer variável contínua. O eixo Y é sempre numérico. Limpe valores nulos e outliers agressivos. Um único ponto mal posicionado pode esticar seu eixo Y inteiro e tornar o gráfico ilegível. Minha recomendação prática é validar os dados antes de renderizar. Um script simples que verifica se X está em ordem crescente e se não há duplicatas resolve metade dos problemas que vejo em production.

Implementação básica em JavaScript

Vamos ao código. A ideia é montar um gráfico de linhas simples com HTML5 canvas, sem dependências pesadas. Isso já é suficiente para a maioria dos casos reais.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Gráfico de Linhas Simples</title>
  <style>
    canvas { border: 1px solid #ccc; display: block; margin: 20px 0; }
  </style>
</head>
<body>

<h2>Gráfico de Linhas Simples</h2>

<canvas id="lineChart" width="800" height="400"></canvas>

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

const padding = 60;
const width = canvas.width;
const height = canvas.height;

const data = [
  { x: 'Jan', y: 120 },
  { x: 'Fev', y: 195 },
  { x: 'Mar', y: 170 },
  { x: 'Abr', y: 230 },
  { x: 'Mai', y: 210 },
  { x: 'Jun', y: 280 },
  { x: 'Jul', y: 310 },
  { x: 'Ago', y: 290 },
  { x: 'Set', y: 340 },
  { x: 'Out', y: 320 },
  { x: 'Nov', y: 380 },
  { x: 'Dez', y: 410 }
];

const xValues = data.map(d => d.x);
const yValues = data.map(d => d.y);
const maxY = Math.max(...yValues);
const minY = Math.min(...yValues);

const stepX = (width - padding * 2) / (data.length - 1);

function scaleX(i) {
  return padding + i * stepX;
}

function scaleY(value) {
  return height - padding - ((value - minY) / (maxY - minY)) * (height - padding * 2);
}

ctx.beginPath();
ctx.strokeStyle = '#2563eb';
ctx.lineWidth = 2;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';

data.forEach((point, index) => {
  const px = scaleX(index);
  const py = scaleY(point.y);

  if (index === 0) {
    ctx.moveTo(px, py);
  } else {
    ctx.lineTo(px, py);
  }
});

ctx.stroke();

data.forEach((point, index) => {
  const px = scaleX(index);
  const py = scaleY(point.y);

  ctx.beginPath();
  ctx.arc(px, py, 4, 0, Math.PI * 2);
  ctx.fillStyle = '#2563eb';
  ctx.fill();

  ctx.fillStyle = '#333';
  ctx.font = '12px sans-serif';
  ctx.textAlign = 'center';
  ctx.fillText(point.x, px, height - 20);

  ctx.fillText(point.y, px, py - 12);
});

ctx.strokeStyle = '#999';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(padding, padding);
ctx.lineTo(padding, height - padding);
ctx.lineTo(width - padding, height - padding);
ctx.stroke();
</script>

</body>
</html>

O código acima desenha um gráfico de linhas simples com marcadores nos pontos, eixos básicos e labels. Ele não precisa de biblioteca alguma. Para projetos maiores, bibliotecas como Chart.js ou D3 facilitam, mas o princípio é o mesmo.

Problema real que eu enfrentei

Tive um caso em que os dados vinham com intervalos irregulares de tempo. Três pontos em janeiro, nenhum em fevereiro, cinco em março. O gráfico de linhas simples tradicional conecta tudo na mesma proporção espacial, então fevereiro aparecia como um vácuo branco que engolia metade do eixo X. A solução foi mapear X usando timestamps reais em milisegundos em vez de índices de array. Assim, a distância entre os pontos refletia o tempo decorrido de verdade, e não a quantidade de amostras. Outro problema comum: escalas logarítmicas. Quando seus dados têm variação exponencial (custos de servidor, crescimento de usuários), uma escala linear comprime tudo na parte inferior e os picos viram linhas retas verticais. Trocar para escala logarítmica no eixo Y resolve, mas exige que você trate os rótulos manualmente ou use uma biblioteca que suporte isso nativamente.

Erros frequentes

O erro mais comum é ignorar a legendas e os títulos. Um gráfico de linhas simples sem contexto é apenas uma linha azul em um fundo branco. Colocar título, rótulo nos eixos e uma legenda quando há mais de uma série economiza minutos de explicação que de outra forma seriam perdidos em reuniões. Outro erro é excessivo. Muita cor, muitos efeitos de sombra, gradiente no fundo, textura — tudo isso distrai. Gráficos de linhas simples funcionam melhor com cores sóbrias e fundo limpo. Se você precisa de três efeitos visuais para fazer o gráfico funcionar, o problema provavelmente está nos dados, não no design.

Download e recursos

Você pode baixar o exemplo completo acima como um arquivo HTML único. Salve como grafico-linhas-simples.html e abra no navegador. Funciona offline, sem dependências externas. Se quiser evoluir o projeto, recomendo migar para Canvas API com requestAnimationFrame para animações suaves, ou para SVG se precisar de interatividade avançada com hover e tooltips. Bibliotecas como Chart.js oferecem um bom equilíbrio entre simplicidade e funcionalidade, mas exigem conhecimento prévio de como os dados são estruturados por dentro para evitar surpresas.

Quando NÃO usar

Gráfico de linhas simples não é adequado para dados categóricos sem ordem, para comparação de partes de um todo, ou quando a precisão individual dos pontos importa mais que a tendência geral. Nesses casos, gráficos de dispersão, pizza ou barras são mais apropriados. Forçar um gráfico de linhas simples onde ele não cabe é uma das causas mais comuns de gráficos enganosos que eu vejo em apresentações de negócio. Se seus dados têm muitas séries sobrepostas (mais de cinco), o gráfico vira um prato de espaguete. Nesse cenário, considere gráficos de linhas empilhadas, facetas ou uma tabela de dados com ordens de magnitude claras. Às vezes a solução mais honesta é simplesmente não graficar e deixar os números falarem por si mesmos.

O exemplo acima é um ponto de partida sólido. Ajuste os dados, experimente com diferentes interpoladores e observe como a leitura muda. É nessa tentativa e erro que você aprende o que funciona na prática.