Semantic palette – Charts

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
Shared API: Chart component

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:

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.