Skip to content

Per-series color & dashed line style for ui_line_chart - #154

Merged
tylercschneider merged 5 commits into
mainfrom
feat/line-chart-series-styling
Jul 1, 2026
Merged

Per-series color & dashed line style for ui_line_chart#154
tylercschneider merged 5 commits into
mainfrom
feat/line-chart-series-styling

Conversation

@tylercschneider

Copy link
Copy Markdown
Collaborator

Closes #137

What

Adds per-series styling to ui_line_chart so overlaid lines (e.g. current vs previous period) are visually distinguishable.

A series entry now accepts two optional keys:

  • color: — any CSS color, or an accent token like var(--color-accent-500).
  • dashed:true renders a dashed line (borderDash: [6, 6]).
<%= ui_line_chart(labels: %w[Mon Tue Wed], series: [
  { name: "This period", data: [3, 5, 4] },
  { name: "Prev period",  data: [2, 3, 3], color: "var(--color-accent-500)", dashed: true }
]) %>

Notes

  • Backward compatible — a bare { name:, data: } series produces the exact same dataset as before; the styling keys are only added when present.
  • Accent/surface palette — Chart.js draws on canvas and can't resolve var(--color-...) strings, so the line-chart controller resolves CSS custom-property borderColors to concrete values at connect time. This lets the accent/surface color system drive line colors.
  • Documented in the reference guide + CHANGELOG; committed the_local locals rebuilt (rake the_local:build).

Tests

  • Series color: → dataset borderColor.
  • Series dashed: true → dataset borderDash.
  • Existing suite green (426 runs).

🤖 Generated with Claude Code

@tylercschneider
tylercschneider merged commit 1aec724 into main Jul 1, 2026
4 checks passed
@tylercschneider
tylercschneider deleted the feat/line-chart-series-styling branch July 1, 2026 18:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ui_line_chart: per-series color / line-style options

1 participant