> ## Documentation Index
> Fetch the complete documentation index at: https://smithers.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Chart

> Recharts-backed chart primitives with the validated smithers series palette, tooltip, and legend.

Import from the heavy-dependency adapter subpath (never the base `ui` barrel):

```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
  chartConfig,
} from "smithers-orchestrator/ui/adapters/chart";

const config = chartConfig([
  { key: "landed", label: "Landed" },
  { key: "inflight", label: "In flight" },
]);

<ChartContainer config={config}>
  <BarChart data={rows}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="area" tickLine={false} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Bar dataKey="landed" fill="var(--color-landed)" radius={[4, 4, 0, 0]} maxBarSize={24} />
    <Bar dataKey="inflight" fill="var(--color-inflight)" radius={[4, 4, 0, 0]} maxBarSize={24} />
  </BarChart>
</ChartContainer>
```

`ChartContainer` owns sizing (16:9 by default; size it with CSS), injects one
`--color-<key>` custom property per config entry for the active theme, and
restates the Recharts chrome in smithers tokens: hairline grid and axes, muted
tick text. Colors react to the `data-theme` stamp and the OS scheme.

## Series colors

`chartConfig(series)` assigns the fixed categorical palette slots in order.
The palette is CVD-validated against both smithers surfaces; the slot order is
the safety mechanism, so never reorder, cycle, or invent hues. Past eight
series, fold the tail into "Other" or facet into small multiples.
`chartSeriesColor(index, theme)` exposes the raw slot values;
`CHART_SERIES` is the full table. Custom entries can pass
`{ color }` or `{ theme: { light, dark } }` per key instead.

House chart rules the component expects from callers: one axis per chart
(never dual-axis), bars at most 24px thick (`maxBarSize={24}`) with rounded
data-ends, 2px lines, and text in text tokens rather than series colors. Keep
the tooltip and legend mounted for two or more series: several light-mode
slots sit below 3:1 contrast by design, and the tooltip/legend/table are the
mandated relief.

## Props

| Export                                 | Kind      | Notes                                                                        |
| -------------------------------------- | --------- | ---------------------------------------------------------------------------- |
| `ChartContainer`                       | component | `config: ChartConfig` plus `div` props; children are Recharts elements       |
| `ChartConfig`                          | type      | `{ [key]: { label?, icon?, color? \| theme: { light, dark } } }`             |
| `chartConfig`                          | helper    | build a config from `{ key, label? }[]`, palette slots in order              |
| `chartSeriesColor`                     | helper    | `(index, "light" \| "dark") => hex`, clamps past the last slot               |
| `CHART_SERIES`                         | constant  | the eight validated `{ light, dark }` slots                                  |
| `ChartTooltip` / `ChartTooltipContent` | component | Recharts `Tooltip` + token-styled content (labels, swatches, tabular values) |
| `ChartLegend` / `ChartLegendContent`   | component | Recharts `Legend` + token-styled content                                     |
| `ChartProvider`                        | component | bare config context for composing tooltip/legend content outside a container |

**Source**: `packages/ui/src/adapters/chart.tsx`

**Tests**: `packages/ui/tests/chart.test.tsx`