> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Categorical palette

> Compose out-of-order categorical hues for @servicetitan/anvil2-charts-kit.

Themes assign categorical color by series or datum index. Compose with `chartPalette` to reach a hue outside that order, selecting from the Anvil2 list rather than authoring hex values.

* Design: [Categorical color palette](https://anvil.servicetitan.com/docs/data-visualization/categorical-color-palette.md)
* Shared API: [Chart component](https://anvil.servicetitan.com/docs/charts/web/chart.md)

Select hues by index into the array. The array holds the Anvil2 order, so the choice is which entry to use rather than which hex value to write:

charts-react-palette-categorical

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/charts-react-palette-categorical?file=src/App.tsx)

```tsx lines expandable theme={null}
import {
  Chart,
  chartPalette,
  type EChartsOption,
} from "@servicetitan/anvil2-charts-kit";
import "@servicetitan/anvil2-charts-kit/styles.css";

function App() {
  const appearance = "light" as const;
  const colors = chartPalette(appearance, "categorical");

  const option: EChartsOption = {
    grid: { left: 48, right: 16, top: 24, bottom: 84 },
    legend: { bottom: 0 },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    },
    yAxis: { type: "value" },
    series: [
      {
        type: "line",
        name: "A",
        data: [820, 932, 901, 934, 1290, 1330],
        itemStyle: { color: colors[2] },
      },
      {
        type: "line",
        name: "B",
        data: [620, 732, 701, 734, 1090, 1130],
        itemStyle: { color: colors[0] },
      },
    ],
  };

  return (
    <Chart
      option={option}
      appearance={appearance}
      variant="categorical"
      width={480}
      height={300}
      accessibilityLabel="Line chart. Series A and B by month."
    />
  );
}

export default App;
```

Avoid hard-coding Anvil2 hex values in a chart option. Resolving through `chartPalette` keeps the light and dark appearances correct as tokens change.

***


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.