Line Charts

Linhas para tendência e comparação de séries no tempo — quando usar basic, step, multiple, dots, labels e interativo.

A família Line Chart liga pontos por linhas — ideal para tendência e comparação de séries ao longo de um eixo contínuo (tempo). Diferente da Area, não preenche a área: foca na direção e na inclinação da curva.

Visão geral: Charts. Tooltips: Chart Tooltips. Paleta: Chart Colors.

API completa no EletroDS — props, defaults e demo interativa. Esta página foca em quando usar cada variante.
Line Chart — Step

Quando usar cada variante

  • Basic — uma série, curva suave. O caso padrão para tendência de um único indicador.
  • Linear / Step — linear conecta pontos em reta (sem suavização); step desenha a mudança em saltos, ideal para grandezas que mudam de patamar de forma discreta (preço fixo por faixa, status, estoque por lote).
  • Multiple — várias séries no mesmo plano para comparação direta. Use legenda e mantenha poucas séries; acima de 4–5 linhas a leitura sofre.
  • Dots / Custom Dots / Dots Colors — pontos nos vértices destacam observações individuais (úteis quando há poucos pontos ou quando cada ponto é um evento). O marcador hollow ou custom ajuda a distinguir séries sobrepostas.
  • Label — valores ou rótulos sobre os pontos. Reserve para gráficos pequenos e poucos pontos; com muitos dados os rótulos colidem e poluem.
  • Interactive — legenda clicável (liga/desliga séries) e tooltip por hover com crosshair. É o comportamento esperado quando o usuário precisa inspecionar valores exatos ou isolar uma série.
Line Chart — Step
Line Chart — Multiple
Line Chart — Dots
Line Chart — Custom Labels
Line Chart — Interactive

Guia rápido

ObjetivoVariante
Tendência de uma sérieBasic
Mudança em saltos / patamaresStep
Comparar sériesMultiple
Destacar pontos individuaisDots
Anotar valores na curvaLabel
Inspecionar valores exatosInteractive

Estados e acessibilidade

Loading exibe skeleton, vazio mostra mensagem e erro exibe um alerta — todos respeitam o container do gráfico. Uma tabela sr-only acompanha o desenho com a série completa, para leitores de tela.

Performance — séries densas

Acima de 1000 pontos o gráfico reamostra a série com LTTB (Largest-Triangle-Three-Buckets): preserva a forma da curva (picos e vales) e descarta o excesso, mantendo o desenho fluido. O primeiro e o último ponto são sempre mantidos; a tabela acessível continua usando a série completa, e uma nota discreta indica quando houve reamostragem (ex.: "Exibindo 1000 de 5000 pontos"). O limite é configurável e pode ser desligado.

Line Chart — Série densa

Quando não usar

  • Eixo X categórico (não contínuo) e comparação de magnitude entre categorias: use Bar Charts.
  • Ênfase no volume acumulado sob a curva: use Area Charts.