> ## 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-rn-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](/docs/web/data-visualization/semantic-color-palette)
* Shared API: [Chart component](/docs/kits/charts-react-native/chart)

```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:

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

// Role says what the bucket MEANS; tier says how urgent it is within that role.
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",
    name,
    stack: "total",
    data: [value],
    // chartStepItemStyle resolves the step into fill + border + decal.
    itemStyle: chartStepItemStyle(step),
  })),
};

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

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