Palettes – Charts

Import palette helpers from @servicetitan/anvil2-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 for the full comparison. Design rules: Categorical palette, Semantic color palette.

API

import {
  chartPalette,
  chartStepItemStyle,
} from "@servicetitan/anvil2-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.

​API

API