Categorical

Eight perceptually distinct hues for nominal categories - regions, departments, types.

Categorical is the scheme for nominal data without order - when you compare magnitudes across categories that have no "greater/smaller" relationship. Eight perceptually distinct hues, mid-stops from the Tailwind palettes, chosen to stay distinguishable under protanopia, deuteranopia and tritanopia simulation.

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

When to use

Bar charts comparing regions / products / channels - the comparison is "which is bigger", not "which comes first".
Multi-series line charts - different metrics over the same X axis.
Pie or donut with up to 5 slices - beyond that the reading collapses; switch to bars.
Scatter plots where color encodes the category.

Why eight is the ceiling

Above 8 distinct hues, even well built palettes start to blur series together. Research (Brewer, 2003) shows humans have increasing difficulty telling colors apart beyond that limit, especially in small areas (thin lines, dots).

If you need more than 8 series, consider:

Grouping the rest into "Other".
Small multiples - one series per mini chart.
A different visualization - heatmap, parallel coordinates.

When not to use

The data has an inherent order (intensity, severity) - use Sequential.
The data carries state semantics (good/bad/neutral) - use Status.
You have one highlighted series plus background series - use Comparison.

Anti-patterns

Using Categorical for more than 8 series. The colors start blending together and the reading collapses. Refactor to one of the three alternatives above.

Mixing Categorical with Status in the same chart ("one of the series is red because it is the error metric"). This pollutes the reading - the user will infer meaning in every color.

Usage example

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>;