[Bug Fix] Chart: fix theme colors and default to --chart-1..5

Merged
CI
4d ago
+83-12

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

  • getThemeColor returns the token value unchanged. The canvas accepts oklch() in current Chrome, Safari (16.4+) and Firefox (113+).
  • The legend borderRadius was also read through getThemeColor('radius') and came out as hsl(.625rem, undefined, undefined). It is now a fixed 2px, matching the rounded-[2px] legend indicator in shadcn's Base UI chart.
  • Datasets now default to --chart-1 through --chart-5 in order, as in shadcn's chart examples. Pie, doughnut and polar area charts color each slice instead. Before this, every dataset got a --background fill with a --primary border, 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.rb and gem/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

BeforeAfter
Light
before-light-charts
after-light-charts

| Dark | before-dark-charts

| final-dark-charts|

Testing

  1. cd docs && bin/dev, open /docs/chart.
  2. 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.
  3. Toggle the theme while on the page. The charts re-render with the new mode's colors.
  4. 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 borderRadius is a fixed 2px instead of reading --radius through the same path.
  • Datasets cycle through --chart-1 to --chart-5 in 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.