Area Charts
Áreas preenchidas — quando usar cada variante (smooth, step, stacked, expanded, gradient) e estados.
A família Area Chart mostra a evolução de valores ao longo de um eixo (tempo) com a área sob a linha preenchida. Use quando o foco é volume/tendência acumulada — e, com várias séries, a composição ao longo do tempo.
Todas as variantes usam a paleta --chart-N (light/dark automático), ficam num Card, têm linha forte no topo da série, área translúcida e gridlines sutis. Múltiplas séries empilham (stacked) por padrão.
Quando usar
Prefira Area Chart quando o que importa é a massa acumulada ou a tendência de uma métrica contínua no tempo, não o valor pontual de categorias soltas.
Quando NÃO usar: para comparar categorias discretas (ex.: vendas por região), use Bar Charts. Para acompanhar valores exatos sem ênfase em volume, prefira Line Charts.
Variantes
Basic
Série única, curva suave. A escolha padrão para a evolução de um indicador no tempo.
Linear / Step
Muda só a interpolação da curva: linear traça segmentos retos entre pontos; step desenha patamares — ideal para valores que mudam em saltos discretos (preço de tabela, estoque), em que interpolar suavemente daria uma falsa sensação de transição contínua.
Stacked
Duas ou mais séries empilhadas: a altura total é a soma das séries. Use para ver, ao mesmo tempo, o total e quanto cada série contribui para ele.
Stacked Expanded
O empilhado normalizado para 100%. Some a magnitude absoluta e foque na proporção de cada série ao longo do tempo — bom para responder "qual a participação de cada parte" em vez de "quanto cresceu".
Gradient
Preenchimento em gradiente vertical (forte no topo → transparente na base), com a linha do topo sólida. Puramente estético: melhora a leitura quando há sobreposição de séries, sem alterar os dados.
Legend / Icons
Ative a legenda quando houver mais de uma série, para identificar e isolar séries no clique. Os ícones por série reforçam a identificação quando a cor sozinha não basta (acessibilidade, impressão).
Axes
Exibe a escala numérica do eixo Y à esquerda. Use quando o leitor precisa ler valores aproximados, não só a forma da tendência.
Interactive
Série densa (granularidade diária) ocupando a largura toda, com legenda e tooltip no hover. Indicado para dashboards onde o usuário explora pontos específicos — veja a customização em Chart Tooltips.
Estados
Como nos demais charts, o componente trata loading (skeleton), error e empty (sem dados) com textos padrão do EDS — sempre prefira esses estados a esconder o gráfico.
Guia rápido
| Objetivo | Variante |
|---|---|
| Tendência de uma métrica | Basic |
| Saltos discretos | Step |
| Total + composição no tempo | Stacked |
| Proporção (100%) | Stacked Expanded |
| Visual com fade | Gradient |
| Mostrar escala Y | Axes |