Skip to content

feat: add LabelList component Storybook story#7244

Merged
PavelVanecek merged 1 commit into
recharts:mainfrom
whatfontisthis:feat/labellist-story
May 28, 2026
Merged

feat: add LabelList component Storybook story#7244
PavelVanecek merged 1 commit into
recharts:mainfrom
whatfontisthis:feat/labellist-story

Conversation

@whatfontisthis

@whatfontisthis whatfontisthis commented Apr 14, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

Summary

  • Implements Storybook API story for the LabelList component, resolving LabelList Story #3739
  • Covers all props from the recharts API docs: angle, clockWise, content, dataKey, formatter, id, offset, position, textBreakAll, valueAccessor, zIndex
  • Uses LabelListArgs (auto-generated by omnidoc) for argTypes, following the same pattern as Line.stories.tsx

Stories added

Story Chart type Purpose
API LineChart Main API story with all props controlled via argTypes
OnBarChart BarChart Shows LabelList in the most common use-case (bar labels)
OnRadarChart RadarChart Demonstrates clockWise prop in a polar/radar context
WithCustomContent BarChart Shows the content prop with a custom renderer
WithFormatter BarChart Shows the formatter prop for custom label text

Test plan

  • Run npm run omnidoc to generate storybook/stories/API/arg-types/LabelListArgs.ts
  • Run npm run storybook and navigate to Component / LabelList
  • Verify all 5 stories render correctly and argType controls are visible in the Controls panel
  • Verify the API story exposes all LabelList props with correct default values

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

  • Documentation
    • Expanded LabelList component Storybook stories with new examples showcasing usage in bar charts, radar charts, and custom content scenarios.
    • Added documentation for additional LabelList configuration options including offset, angle, text breaking, and z-index.
    • Introduced formatter function example for enhanced customization.

Review Change Stack

@whatfontisthis @claude
feat: add LabelList component Storybook story
04fd426 
Implements storybook/API story for the LabelList component covering all
props from the recharts API docs (angle, clockWise, content, dataKey,
formatter, id, offset, position, textBreakAll, valueAccessor, zIndex).
Adds API (LineChart), OnBarChart, OnRadarChart, WithCustomContent, and
WithFormatter story variants to demonstrate LabelList across chart types.

Closes recharts#3739

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
@coderabbitai

coderabbitai Bot commented Apr 14, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 395b44d6-db8e-49ea-8087-ed4d179e68a1

📥 Commits

Reviewing files that changed from the base of the PR and between 34159e6 and 04fd426.

📒 Files selected for processing (1)
  • storybook/stories/API/component/LabelList.stories.tsx

Walkthrough

Updated LabelList Storybook file with expanded recharts imports and four new demonstration stories. The existing API story was enhanced with YAxis rendering and additional LabelList props. New stories showcase LabelList integration with BarChart, RadarChart, custom label content rendering, and formatter functions.

Changes

LabelList Storybook Story Expansion

Layer / File(s) Summary
Imports and dependencies
storybook/stories/API/component/LabelList.stories.tsx		 Broadened recharts imports to include BarChart, RadarChart, Radar, Bar components and LabelProps type needed for the expanded story set.
API story enhancement and new demonstrations
storybook/stories/API/component/LabelList.stories.tsx		 Added YAxis to the LineChart, extended API story args with offset, angle, textBreakAll, and zIndex props. Introduced OnBarChart, OnRadarChart, WithCustomContent, and WithFormatter stories demonstrating LabelList across different chart types and use cases.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

  • PavelVanecek
  • ckifer
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov

codecov Bot commented Apr 15, 2026 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.07%. Comparing base (34159e6) to head (04fd426).
⚠️ Report is 85 commits behind head on main.

Additional details and impacted files 
@@           Coverage Diff           @@
##             main    #7244   +/-   ##
=======================================
  Coverage   89.07%   89.07%           
=======================================
  Files         539      539           
  Lines       41010    41010           
  Branches     5557     5557           
=======================================
  Hits        36528    36528           
  Misses       4474     4474           
  Partials        8        8

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@codecov

codecov Bot commented Apr 15, 2026

Copy link
Copy Markdown

Bundle Report

Bundle size has no change ✅

@PavelVanecek
PavelVanecek marked this pull request as ready for review May 28, 2026 07:14
@PavelVanecek
PavelVanecek merged commit 40cf116 into recharts:main May 28, 2026
52 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@PavelVanecek PavelVanecek PavelVanecek approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@whatfontisthis @PavelVanecek