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

# Semantic palette

> Compose semantic (status) chart colors for @servicetitan/anvil2-charts-kit.

The semantic palette is not a `variant`. Colors are selected by role, one of `success`, `warning`, `danger`, or `default`, and by urgency tier, one of `primary`, `secondary`, or `tertiary`. The palette has no fixed series order, so the consumer assigns a color per datum or series.

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

```tsx theme={null}
const palette = chartPalette(appearance, "semantic");

// One role, three urgencies — impossible for an index-cycled variant:
itemStyle: chartStepItemStyle(palette.danger.primary);
itemStyle: chartStepItemStyle(palette.danger.secondary); // striped intermediate
itemStyle: chartStepItemStyle(palette.danger.tertiary); // pale + outline
```

Invoice aging is the reference case for the semantic palette. Three of the five segments share the `danger` role and differ only by urgency tier:

charts-react-palette-semantic

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

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

function App() {
  const appearance = "light" as const;
  const palette = chartPalette(appearance, "semantic");

  const buckets = [
    { name: "Current", value: 83414.75, step: palette.success.primary },
    { name: "1–30 days", value: 83414.75, step: palette.warning.primary },
    { name: "31–60 days", value: 29440.5, step: palette.danger.tertiary },
    { name: "61–90 days", value: 18000, step: palette.danger.secondary },
    { name: "90+ days", value: 24000, step: palette.danger.primary },
  ];

  const option: EChartsOption = {
    grid: { left: 8, right: 8, top: 8, bottom: 84 },
    legend: { bottom: 0 },
    xAxis: { type: "value", show: false },
    yAxis: { type: "category", show: false, data: ["Unpaid"] },
    series: buckets.map(({ name, value, step }) => ({
      type: "bar" as const,
      name,
      stack: "total",
      data: [value],
      itemStyle: chartStepItemStyle(step),
    })),
  };

  return (
    <Chart
      option={option}
      appearance={appearance}
      variant="categorical"
      height={180}
      width={560}
      accessibilityLabel="Stacked bar. Unpaid invoices by aging bucket."
    />
  );
}

export default App;
```

The rendered ECharts option contains resolved hex values. Those are the output of `chartStepItemStyle` rather than values to author by hand, so resolve them through `chartPalette`.


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