React Charts
LineChart and BarChart, hand-rolled SVG on the --chart-1…5 tokens — a palette validated for color-vision deficiency in both themes. The rules are built in, not optional: 2px lines with ≥8px hover markers and a crosshair tooltip; thin bars with 2px surface gaps (stacked segments too); recessive hairline grid; a legend whenever there are two or more series; and every numeric readout in mono text tokens — never in series colors. Responsive via ResizeObserver.
Wafer yield by fab — weekly
Regression runtime — single series with area
Lots completed — grouped
Test time by insertion — stacked
Hover any chart — lines get a crosshair with markers, bars highlight per category, and every readout stays in text tokens.
Installation
Usage
Props
Shared by both charts: series: { name, data }[] (up to 5 — the validated palette), labels: string[], height?, unit?, title? (accessible name).
| Prop | Chart | Default | Description |
|---|---|---|---|
| showArea | Line | false | Subtle area fill (single-series only) |
| stacked | Bar | false | Stack series with 2px surface gaps |
Series cap is deliberate: past five series, fold into "Other" or split into small multiples — never generate new hues.