> ## 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.

# Palettes

> Compose chart colors with chartPalette for @servicetitan/anvil2-rn-charts-kit.

Import palette helpers from `@servicetitan/anvil2-rn-charts-kit`. Use `variant` when color follows series or datum index. Use `chartPalette` when color encodes meaning, as the semantic palette does, or when a hue or step falls outside index order. See [Chart component](/docs/kits/charts-react-native/chart#palette-utilities) for the full comparison.

Design rules: [Categorical palette](/docs/web/data-visualization/categorical-color-palette), [Semantic color palette](/docs/web/data-visualization/semantic-color-palette).

## API

```tsx theme={null}
import {
  chartPalette,
  chartStepItemStyle,
} from "@servicetitan/anvil2-rn-charts-kit";
```

| Call                                      | Returns         | Shape                                        |
| ----------------------------------------- | --------------- | -------------------------------------------- |
| `chartPalette(appearance, "monochrome")`  | 4 steps         | `ChartStep[]` of `{ fill, stroke, pattern }` |
| `chartPalette(appearance, "categorical")` | 10 hues         | `string[]` (raw hex, ordered 01→10)          |
| `chartPalette(appearance, "semantic")`    | role × tier map | `SemanticChartPalette`                       |

`chartStepItemStyle(step)` turns a `ChartStep` into an ECharts `itemStyle` with a fill, a 1px border, and a striped decal. Use it for monochrome steps and for every semantic tier. Categorical hues are flat colors, so set `itemStyle: { color }` directly, or rely on `variant="categorical"` when the order matches.

When composing, keep a base variant, usually `variant="categorical"`, so the axis and hover styling still apply. The `itemStyle` values then override the index colors.