Categorical
Cinco hues para identidade de série em dado nominal — regiões, departamentos, tipos.
Categorical é o esquema para dados nominais sem ordem — quando você compara magnitudes entre categorias que não têm relação de "maior/menor". Cinco hues, uma família primitiva por slot, a mesma família no claro e no escuro para que uma série mantenha sua cor quando o modo troca — só o step muda (500 no claro, 600 no escuro).
O conjunto é medido, não julgado no olho: cada par passa por faixa de luminosidade, piso de croma, separação sob protanopia e deuteranopia simuladas, separação para visão normal, e contraste contra a superfície do gráfico.
Tokens
| Amostra | Token | Primitivo |
|---|---|---|
| --chart-cat-1 | blue-500 | |
| --chart-cat-2 | amber-500 | |
| --chart-cat-3 | green-500 | |
| --chart-cat-4 | cyan-500 | |
| --chart-cat-5 | pink-500 |
Quando usar
- Bar charts comparando regiões / produtos / canais — a comparação é "qual é maior", não "qual vem antes".
- Line charts multi-série — diferentes métricas sobre o mesmo eixo X.
- Pie ou donut com até 5 fatias — acima disso, a leitura desmorona; troque para bar.
- Scatter plots com cor codificando categoria.
Por que cinco, e o que acontece depois
Cinco não é preferência de design — é o que estas rampas primitivas
de fato separam. Um sexto slot colapsa contra um dos cinco sob
daltonismo, venha de que família vier: fuchsia cai sobre blue a
ΔE 5.0 sob protanopia, purple a ΔE 0.7 sob a mais comum
deuteranopia, e sky reprova até para visão normal contra cyan.
Incluí-lo daria a duas séries a mesma leitura.
O esquema categórico do Notion para em cinco e repete, pelo mesmo motivo.
A partir da sexta série a escala se repete. Duas séries passam a dividir uma cor, o que é um custo real e deliberado: repetição é mais fácil de contornar que um hue gerado que colide com o vizinho, e mais honesta que um neutro silencioso.
Se você precisa de mais de cinco séries, o gráfico costuma ser o problema:
- Agrupar o resto em "Outros".
- Small multiples — uma série por mini-gráfico.
- Visualização diferente — heatmap, parallel coordinates.
Não é tematizável, de propósito
Paleta de marca serve à chrome. Identidade de série precisa de hues que separem, e uma sobrescrita por tema transforma isto numa rampa de um hue só — que codifica ordem, não identidade, deixando duas séries a diferir apenas em luminosidade. A escala é a mesma em todo tema.
Quando não usar
- O dado tem ordem inerente (intensidade, gravidade) — use Sequential.
- O dado tem semântica de estado (bom/ruim/neutro) — use Status.
- Você tem uma série em destaque + outras de fundo — use Comparison.
Anti-patterns
Usar Categorical para mais de 8 séries. As cores começam a se confundir e a leitura desmorona. Refatore para uma das três alternativas acima.
Misturar Categorical com Status no mesmo gráfico ("uma das séries é vermelha porque é a métrica de erro"). Isso polui a leitura — o usuário vai inferir significado em todas as cores.
Exemplo de consumo
import { Line, LineChart } from 'recharts';
const config = {
receita: { label: 'Receita', color: 'var(--color-chart-cat-1)' },
custo: { label: 'Custo', color: 'var(--color-chart-cat-2)' },
lucro: { label: 'Lucro', color: 'var(--color-chart-cat-3)' },
} satisfies ChartConfig;
<LineChart data={data}>
<Line dataKey="receita" stroke="var(--color-chart-cat-1)" />
<Line dataKey="custo" stroke="var(--color-chart-cat-2)" />
<Line dataKey="lucro" stroke="var(--color-chart-cat-3)" />
</LineChart>;