[Bug Fix] Chart: fix theme colors and default to --chart-1..5
The Chart controller was drawing every chart in black. getThemeColor split each CSS token on spaces and wrapped it in hsl(), which worked when the tokens were HSL triples. The theme now uses oklch(...), so the controller produced strings like hsl(oklch(20.5%, 0, 0)). The canvas rejects those, and Chart.js fell back to black for bars, grid lines, ticks and tooltips. In dark mode the bar and line charts were close to invisible. Found while working on #581.
Changes
getThemeColorreturns the token value unchanged. The canvas acceptsoklch()in current Chrome, Safari (16.4+) and Firefox (113+).- The legend
borderRadiuswas also read throughgetThemeColor('radius')and came out ashsl(.625rem, undefined, undefined). It is now a fixed 2px, matching therounded-[2px]legend indicator in shadcn's Base UI chart. - Datasets now default to
--chart-1through--chart-5in order, as in shadcn's chart examples. Pie, doughnut and polar area charts color each slice instead. Before this, every dataset got a--backgroundfill with a--primaryborder, so all series looked alike. Colors set on a dataset still take precedence, as the pie example on the docs page shows. - Docs: a short note on the default colors and a "Multiple datasets" bar example, in both
docs/app/views/docs/chart.rbandgem/lib/ruby_ui/chart/chart_docs.rb.
With the neutral --chart-N values from #581, the default series come out in grays, as in shadcn's neutral theme.
Screenshots
| Before | After | |
|---|---|---|
| Light | ||
| Dark |
| |
Testing
cd docs && bin/dev, open/docs/chart.- In light and dark mode, check that bars, lines, grid lines and ticks use theme colors, and that the "Multiple datasets" example shows two distinct colors.
- Toggle the theme while on the page. The charts re-render with the new mode's colors.
cd gem && bundle exec rake;cd docs && bin/rails db:test:prepare test && bundle exec standardrb.
š¤ Generated with Claude Code
Summary by cubic
Fixes charts rendering entirely in black and making every series look alike. The chart controller wrapped the theme's oklch() tokens in hsl(), which the canvas rejects, and gave every dataset the same background fill with a primary border.
- Theme tokens are now passed through unchanged; the legend
borderRadiusis a fixed 2px instead of reading--radiusthrough the same path. - Datasets cycle through
--chart-1to--chart-5in order, while pie, doughnut, and polar area charts color each slice instead. Explicit dataset colors still take precedence. - Pie slice colors work with both array and keyed object data.
- Rebuilt the MCP registry to include the updated controller and a new "Multiple datasets" docs example.