Visão geral
Cinco esquemas canônicos para visualização de dados — cada um para uma forma específica de dado, validados em fundamentação acadêmica e prática de DS de produto.
Charts não compartilham os tokens semânticos da UI. Eles têm uma camada própria, com cinco esquemas canônicos. A separação não é estética — é técnica: cada tipo de dado precisa de um tratamento cromático específico, e misturá-los produz gráficos errados (um gradiente sequential aplicado a categorias nominais sugere ordem onde não há).
Esta é a camada 3 de 3: tokens de chart referenciam primitivos e mudam com o modo light e dark, mas, ao contrário dos tokens semânticos, não com o tema (a Status é a única exceção, veja abaixo). O desenho completo está no modelo de três camadas.
Os cinco esquemas
Sequential
Gradiente de uma matiz para dados ordenados — heatmaps, choropleths, intensidade.
Categorical
Oito hues distintos para categorias nominais — regiões, departamentos, tipos.
Divergent
Bipolar com pivô neutro — variação acima/abaixo, NPS, sentiment.
Status
Estado semântico discreto — sucesso, aviso, erro, info, neutro.
Comparison
Destaque-um-mute-os-outros — você vs pares, atual vs baseline.
Por que cinco e não três
A fundamentação dos três primeiros vem do ColorBrewer (Cynthia Brewer, Penn State) — referência canônica em dataviz desde os anos 90. Os outros dois são contribuições de DS de produto:
- Status vem do Cloudscape (AWS) e Carbon (IBM) — UI systems que precisaram nomear cores de estado para dashboards.
- Comparison é uma convenção interna do Kalvner DS, para cobrir um caso de uso onipresente em dashboards (destaque-um) que não tinha nome canônico na literatura.
A matriz de decisão
Para escolher o esquema certo, comece pela forma do dado, não pelo gosto:
| Forma do dado | Esquema | Tipo de gráfico recomendado |
|---|---|---|
| Ordenado, low → high (densidade, intensidade) | Sequential | Heatmap, choropleth, Bar com gradiente |
| Nominal sem ordem (regiões, departamentos, tipos) | Categorical | Bar, Line, Area multi-série, Pie |
| Bipolar com pivô (acima/abaixo da média, variação) | Divergent | Bar com baseline, matriz de correlação |
| Estado discreto com semântica (sucesso/erro/aviso) | Status | KPI tile, dashboard de saúde, alert |
| Dois grupos sem polos semânticos (atual/anterior, A/B) | Comparison | Bar / Line com 1 série em destaque |
Veja a página Chart na seção de UI para ver cada tipo renderizado e a matriz inversa (escolha pela pergunta do leitor).
Variação por modo, não por tema
Os tokens chart mudam com o modo, não com o tema. A camada base
declara cada escala duas vezes: no :root para light e no .dark
para dark. A Categorical desce um passo, mais escura, no modo dark;
a Sequential, a Divergent e os mutes da Comparison invertem, para a
ponta forte subir em direção ao claro. Nenhum tema declara um token
de chart, então as escalas são as mesmas em qualquer tema, exceto a
Status, que aponta para --success, --warning, --destructive e
--muted-foreground e acompanha o tema que os sobrescreve (hoje a
série neutra no Claude e no Purple). Uma paleta de marca é para a
chrome, e a identidade de série precisa de matizes que se separem
(veja Categorical).
Isso significa que um gráfico construído com --color-chart-cat-1
pinta as mesmas cores de série em qualquer tema e só troca entre
light e dark, sem o componente saber. Para o designer, a implicação
é:
- Não escolha o esquema chart pelo gosto cromático, escolha pela forma do dado.
- Verifique acessibilidade nos dois modos e sobre as superfícies de cada tema: as séries são as mesmas, mas o fundo atrás do gráfico muda por tema.
- Os 5 esquemas mantêm a mesma intenção nos dois modos: Sequential continua sendo "ordenado por claridade", Status continua sendo "estado semântico", etc. Só a cor concreta muda.
Acessibilidade primeiro
Todos os cinco esquemas foram desenhados com color-blind safety no centro:
- Sequential lê pela claridade, não pela matiz.
- Divergent usa Red-Blue, não Red-Green — porque Red-Green é inacessível para 8% dos homens com deficiência de visão de cor.
- Categorical usa hues perceptualmente distintos sob simulação de protanopia, deuteranopia e tritanopia.
- Status sempre deve vir acompanhado de label, ícone ou padrão — cor sozinha nunca é o canal único.
Anti-padrão. Não use Red-Yellow-Green (RdYlGn) para Divergent. O Gremorie não fornece esse esquema nem como opt-in. Adapte para Red-Blue (RdBu).
Como referenciar nos componentes
Os tokens chart são bridgeados para o gerador de utilitários do
Tailwind via @theme inline. Você pode consumi-los de três formas:
// 1. CSS variable direto (recomendado para Recharts)
<Bar fill="var(--color-chart-cat-1)" />
// 2. Utilitário Tailwind gerado automaticamente
<rect className="fill-chart-cat-1" />
// 3. ChartConfig do Gremorie (consumido pelos helpers de tooltip / legenda)
const config = {
revenue: { label: "Receita", color: "var(--color-chart-cat-1)" }
} satisfies ChartConfig;Para o sistema de gráficos completo — ChartContainer, tooltip,
legenda e os seis tipos cobertos — veja
Chart.