Bar Charts
Barras verticais e horizontais — quando usar basic, grouped, stacked, horizontal, negative e a versão interativa.
A família Bar Chart mostra valores categóricos como barras retangulares — verticais ou horizontais. Use barras quando o foco é comparar grandezas entre categorias discretas (meses, produtos, regiões…).
Visão geral de todos os charts: Charts. Tooltip e formatters: Chart Tooltips. Paleta de cores: Chart Colors.
Todas as variantes usam a paleta --chart-N do EDS (cores adaptam light/dark automaticamente), a fonte Roboto, ficam dentro de um Card e têm legenda clicável no rodapé.
Dois componentes cobrem a família: BarChart (vertical) e HorizontalBarChart (horizontal). As variantes abaixo são combinações de props — empilhar, colorir por sinal/categoria, exibir valores ou habilitar seleção. Props, eventos e API completa estão no doc técnico:
Em qualquer variante, os estados de loading, vazio e erro são suportados nativamente — sempre prefira esses estados a esconder o gráfico, para manter o layout estável e dar feedback claro de carregamento ou falha.
Basic
Barras verticais, série única. Compare um indicador entre categorias discretas (ex.: vendas mensais).
Quando usar: 6–12 categorias, ordem natural (tempo) ou ordenadas por valor.
Quando NÃO usar: mais de 15 categorias com rótulos longos (prefira Horizontal); partes de um todo 100% (prefira PieChart ou DonutChart).
Multiple (Grouped)
Duas ou mais séries lado a lado em cada categoria.
Quando usar: comparar 2–4 métricas na mesma categoria (real vs meta, ano atual vs anterior).
Quando NÃO usar: composição de um total 100% (prefira Stacked); mais de 4 séries agrupadas (fica denso — considere small multiples).
Stacked
Séries empilhadas no mesmo eixo — a altura total representa a soma. HorizontalBarChart também empilha horizontalmente.
Quando usar: mostrar total + composição (vendas por região, tráfego por canal).
Quando NÃO usar: comparar magnitudes absolutas entre séries de tamanhos muito diferentes (prefira Multiple); leitura precisa de cada fatia com muitas séries (prefira PieChart ou tabela).
Horizontal
Barras horizontais — ideais para rótulos longos ou muitas categorias (rankings, produtos).
Quando usar: rankings, listas de produtos/regiões, mais de 8 categorias com nomes extensos.
Quando NÃO usar: eixo temporal curto com poucas categorias (barras verticais leem melhor a progressão no tempo).
Mixed
Barras horizontais com cor distinta por categoria, sem eixo de valores — ideal para rankings visuais (ex.: share de browsers).
Quando usar: comparar categorias independentes onde cada barra pode ter cor própria.
Quando NÃO usar: comparar séries relacionadas na mesma escala (prefira Multiple ou Stacked).
Negative
Valores negativos numa série única — barras acima e abaixo do zero, com cor por sinal. O nome de cada categoria pode ficar na ponta da barra: acima quando o valor é positivo e abaixo quando é negativo, mantendo o eixo zero limpo.
Quando usar: variação com sinal (ganho/perda, delta acima/abaixo de uma baseline).
Quando NÃO usar: duas métricas separadas positivas/negativas agrupadas (considere Multiple com séries distintas).
Interactive
Todos os bar charts incluem legenda interativa e tooltip no hover por padrão.
- Legenda: clique em um item para ocultar/exibir a série — útil para focar uma métrica sem alterar o dataset.
- Tooltip: passe o mouse sobre uma barra para ver todas as séries ativas naquele ponto. A customização de conteúdo e formatação está em Chart Tooltips.
- Crosshair: linha-guia + ponto no hover. No
HorizontalBarCharta guia é horizontal (acompanha a categoria sob o cursor), espelhando o comportamento vertical doBarChart.
Active (seleção)
Destaca uma barra com contorno tracejado. Quando a seleção está habilitada, clicar numa barra a ativa e clicar de novo a desativa (seleção única + toggle). A barra ativa pode ser sincronizada com o estado do app, conectando a leitura do gráfico a filtros ou detalhes em outra área da tela.
Label (valores nas barras)
Exibe valores sobre barras verticais ou ao final de barras horizontais. Em horizontal, o rótulo da categoria pode ficar dentro da própria barra.
Barras pequenas: quando o nome não cabe dentro da barra (valor muito baixo), o rótulo da categoria — e o valor — saem automaticamente para fora da barra, na cor de texto normal, garantindo legibilidade.
Guia rápido de escolha
| Objetivo | Variante |
|---|---|
| Uma métrica, poucas categorias | Basic |
| Comparar 2–4 métricas na mesma categoria | Multiple |
| Total + composição empilhada | Stacked |
| Muitas categorias ou rótulos longos | Horizontal |
| Valores positivos e negativos | Negative |
| Cor distinta por categoria (ranking) | Mixed |
| Destaque/seleção em uma barra | Active |
| Valores visíveis nas barras | Label |