Chart
An ECharts wrapper that reads the active theme's tokens and applies them to axes, series and tooltip, with series colours on an axis of their own.
npx shadcn@latest add @fragiola/chartSeries axis
Chart series colours are their own axis: --chart-1 through --chart-8 (categorical) and --chart-ramp-1 through --chart-ramp-5 (ordinal). They are derived from --palette-base via oklch(from ...) in global.css — theme machinery, not a palette.
No palette role describes "the third series", and reusing danger as series 4 breaks its meaning. The categorical derivation rotates hue while keeping lightness and chroma constant — the series are distinguishable without being a rainbow.
Theme resolution
The useThemeTokens hook reads the chart and palette tokens from the chart's own element and re-reads on theme change via a MutationObserver on documentElement's data-theme attribute. Because the read is scoped, the palette class goes on the chart — <Chart className="palette-blue" /> — and the series are re-derived from that palette for that chart alone. The preview above shows the same wrapper under three palettes.
The tokens leave CSS as plain hex: the categorical slots are relative colours (oklch(from …)), which ECharts cannot parse, so the hook lets the browser resolve them and normalises the result before handing it over.
Thin wrapper
The wrapper does not re-implement ECharts' API. The consumer passes a full EChartsOption, and the wrapper only injects colours. This keeps it thin and avoids locking consumers out of ECharts' features.