Skip to content

feat(#214): toggle chart series via legend - #269

Merged
arisu6804 merged 2 commits into
RemitFlow:mainfrom
Hollujay:feat/214-toggle-chart-series-via-legend
Jul 24, 2026
Merged

feat(#214): toggle chart series via legend#269
arisu6804 merged 2 commits into
RemitFlow:mainfrom
Hollujay:feat/214-toggle-chart-series-via-legend

Conversation

@Hollujay

Copy link
Copy Markdown
Contributor

Summary

Adds support for toggling chart series on/off by clicking legend items in the Chart component. The chart now accepts a series prop alongside the existing data prop for backward compatibility.

Changes

src/components/Chart.jsx

  • Added series prop — accepts an array of { name, color, data } objects for multi-series grouped bar charts
  • When series is provided, a clickable legend is rendered below the chart
  • Clicking a legend item toggles that series visibility (dimmed bars, reduced opacity)
  • Scale recalculates based on visible series only
  • Tooltips show series name in multi-series mode
  • Existing data prop continues to work unchanged

src/components/Chart.css

  • Added .chart-legend, .chart-legend-item, .chart-legend-item--dimmed, .chart-legend-swatch, .chart-legend-label styles

src/components/Chart.stories.jsx

  • Added MultiSeries story showcasing two series (Sent vs Received) with legend

test/components/Chart.test.jsx

  • Added 6 new tests covering:
    • Legend renders with series names
    • Correct bar count for multi-series
    • Series visibility toggled on legend click
    • Legend item dims when series is hidden
    • Tooltip shows series name on hover
    • Default colors assigned when omitted

Testing

All 13 tests (7 existing + 6 new) pass.

Closes #214

@arisu6804

Copy link
Copy Markdown
Contributor

Tidy PR, thanks! ✅

@arisu6804
arisu6804 merged commit 802ce65 into RemitFlow:main Jul 24, 2026
1 check failed
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.

Support toggling chart series via the legend

2 participants