Skip to content

Add StackedBarChart component#24

Merged
islubee merged 1 commit intomainfrom
claude/explore-repo-overview-aYE7G
Apr 20, 2026
Merged

Add StackedBarChart component#24
islubee merged 1 commit intomainfrom
claude/explore-repo-overview-aYE7G

Conversation

@islubee
Copy link
Copy Markdown
Owner

@islubee islubee commented Apr 20, 2026

Summary

  • Adds a StackedBarChart component using d3.stack() to layer multiple numeric series per category
  • Accepts a required keys array — each key must be a numeric property on every datum
  • Tooltip on hover shows category name, hovered series value, and the bar total
  • Non-hovered segments dim to 35% opacity via CSS :has() rules
  • Legend is shown by default (one swatch per key); supports all four legendPosition values
  • README updated with usage example and full prop table

Test plan

  • Run npm test — all 84 tests pass (12 new StackedBarChart tests)
  • Verify segments render: data.length × keys.length rects total
  • Hover a segment — tooltip shows category, series value, and bar total
  • Non-hovered segments dim; moving to another segment updates tooltip
  • showLegend={false} hides the legend
  • Empty data or empty keys renders nothing

Stacks multiple numeric series per category using d3.stack(). Accepts
a required keys array, color scale (defaults to d3.schemeSet2), and
the same axis/legend/tooltip props as BarChart. Hovering a segment
shows category name, series value, and bar total; non-hovered segments
dim via CSS :has(). Legend is shown by default with one swatch per key.

https://claude.ai/code/session_01Bf9veNX9mqfMqrCEGnujAo
@islubee islubee self-assigned this Apr 20, 2026
@islubee islubee merged commit efb187c into main Apr 20, 2026
6 checks passed
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.

2 participants