Categorical

Oito hues perceptualmente distintos para categorias nominais — 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". Oito hues perceptualmente distintos, mid-stops das paletas Tailwind, escolhidos para se diferenciar sob simulação de protanopia, deuteranopia e tritanopia.

cat-1

cat-2

cat-3

cat-4

cat-5

cat-6

cat-7

cat-8

Tokens

Amostra	Token	Primitivo
	--color-chart-cat-1	blue-600
	--color-chart-cat-2	orange-500
	--color-chart-cat-3	emerald-600
	--color-chart-cat-4	violet-600
	--color-chart-cat-5	rose-500
	--color-chart-cat-6	cyan-600
	--color-chart-cat-7	amber-600
	--color-chart-cat-8	fuchsia-600

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 oito é o teto

Acima de 8 hues distintos, mesmo paletas bem construídas começam a confundir séries. A pesquisa (Brewer, 2003) mostra que humanos têm dificuldade crescente em diferenciar cores além desse limite, especialmente em pequenas áreas (linhas finas, pontos).

Se você precisa de mais de 8 séries, considere:

Agrupar o resto em "Outros".
Small multiples — uma série por mini-gráfico.
Visualização diferente — heatmap, parallel coordinates.

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>