Data Display
Chart
Visualização de dados com linha, barra, área, donut e pizza.
Overview
Demonstração real e interativa de Chart nas larguras desktop, tablet e mobile.
Playground
Altere as propriedades e veja o componente atualizar em tempo real.
Superfície
Densidade
Largura
Ajuste o contexto de renderização para validar o componente em diferentes superfícies e larguras.
States
Todos os estados exibidos simultaneamente para facilitar a comparação.
Default
Hover
Feedback imediato
Focus
Anel de foco visível
Disabled
opacity 60%
Examples
Exemplos realistas de uso em contexto de produto.
Bar Chart
Area Chart
Donut Chart
Pie Chart
Empty state
Sem dados no período
Ajuste os filtros para visualizar o gráfico.
Loading state
Usage
Critérios de escolha e boas práticas.
When to use
- Mostrar tendências, comparações e distribuições.
- Dashboards e relatórios analíticos.
When not to use
- Valores únicos — use Value Display.
- Dados que precisam ser lidos com precisão — use Table.
Use no máximo 4 séries e ordene as categorias por relevância.
Não use cores fora da paleta Blue/Neutral Blue nem gráficos de pizza com mais de 5 fatias.
Accessibility
Requisitos obrigatórios para conformidade WCAG 2.1 AA.
- Cada gráfico é acompanhado de tabela ou resumo textual equivalente.
- Não use apenas cor para diferenciar séries: combine legenda, rótulo e padrão.
- Tooltips acessíveis por teclado ao navegar pelos pontos.
Specifications
Valores de referência para implementação, sempre baseados em tokens.
| Propriedade | Valor | Token |
|---|---|---|
| Série 1 | Blue 400 | |
| Série 2 | Blue 200 | |
| Série 3 | Blue 600 | |
| Série 4 | Neutral Blue 300 | |
| Grid | 1px dashed | |
| Tooltip | Surface + shadow-md |