> ## 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](https://anvil.servicetitan.com/docs/charts/react-native/chart.md#palette-utilities) for the full comparison.

Design rules: [Categorical palette](https://anvil.servicetitan.com/docs/data-visualization/categorical-color-palette.md), [Semantic color palette](https://anvil.servicetitan.com/docs/data-visualization/semantic-color-palette.md).

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


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