Skip to content

fix: unnecessary line breaks in Bar labels#6214

Merged
ckifer merged 2 commits intorecharts:mainfrom
eino:fix/bar-label-width
Aug 14, 2025
Merged

fix: unnecessary line breaks in Bar labels#6214
ckifer merged 2 commits intorecharts:mainfrom
eino:fix/bar-label-width

Conversation

@eino
Copy link
Contributor

@eino eino commented Aug 14, 2025

Description

When creating Labels for a bar, pass the parent's viewbox, so that the label sizes can be well calculated.

Related Issue

#6072

Motivation and Context

There was an issue where bar labels either overflowed the chart's bounds, or on the opposite were constrained to a too small space. This was because as the parentViewBox was not available, the labels bounds were wrongly calculated (expecially for labels outside the bars)

How Has This Been Tested?

Tested Those changes with different BarChart configurations; in all cases the labels seem to take the space that's expected (see example screenshots).
Screenshot from 2025-08-14 10-07-01
Screenshot from 2025-08-14 10-06-49
Screenshot from 2025-08-14 10-06-37
Screenshot from 2025-08-14 10-03-59
Screenshot from 2025-08-14 09-59-02

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have added tests to cover my changes.
  • I have added a storybook story or VR test, or extended an existing story or VR test to show my changes

@eino eino force-pushed the fix/bar-label-width branch from 29b8ed3 to 404fbd5 Compare August 14, 2025 08:29
@codecov
Copy link

codecov bot commented Aug 14, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 96.71%. Comparing base (5a5989f) to head (e5bae8b).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #6214      +/-   ##
==========================================
+ Coverage   96.70%   96.71%   +0.01%     
==========================================
  Files         221      221              
  Lines       19880    19886       +6     
  Branches     4102     4103       +1     
==========================================
+ Hits        19224    19233       +9     
+ Misses        650      647       -3     
  Partials        6        6              

☔ 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.

@PavelVanecek
Copy link
Collaborator

Hi @ei, thanks for the PR. I have another change in progress that has a potential to break this again. May I please ask you to add a VR test or storybook that shows this behaviour? Or more direct unit tests? The coverage now only expects that the viewbox is provided, doesn't assert the size of the label. Thanks

@eino
Copy link
Contributor Author

eino commented Aug 14, 2025

Hi @PavelVanecek ,
yes I updated the storybook to show the behavior (FYI joined are the screenshot of the story before and after the fix). I'll try to create a unit test to cover the case.

Regards,
Screenshot from 2025-08-14 14-49-53
Screenshot from 2025-08-14 14-49-48
.

@eino eino force-pushed the fix/bar-label-width branch 2 times, most recently from 1cb0c42 to 041467e Compare August 14, 2025 13:01
@PavelVanecek
Copy link
Collaborator

Thanks! We have visual regression tests on storybooks but we usually get rate limited on those. Unit or playwright test won't have this problem.

@eino eino force-pushed the fix/bar-label-width branch from 041467e to e5bae8b Compare August 14, 2025 13:03
@codecov
Copy link

codecov bot commented Aug 14, 2025

Bundle Report

Changes will increase total bundle size by 154 bytes (0.01%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
recharts/bundle-cjs 1.03MB 154 bytes (0.01%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name Size Change Total Size Change (%)
cartesian/Bar.js 40 bytes 23.45kB 0.17%
state/selectors/barSelectors.js 114 bytes 14.64kB 0.78%

Copy link
Member

@ckifer ckifer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this an issue in other charts too?

@eino
Copy link
Contributor Author

eino commented Aug 14, 2025

It's not specific to BarChart, so using a Bar in a ComposedChart would give the same issue.

@ckifer
Copy link
Member

ckifer commented Aug 14, 2025

Right, but how about the other types of charts - Line, Area, Scatter, Pie, etc.?

@eino
Copy link
Contributor Author

eino commented Aug 14, 2025

Haven't noticed the issue with other types I've used

@ckifer
Copy link
Member

ckifer commented Aug 14, 2025

Sounds good thanks!

@ckifer ckifer merged commit 38df1df into recharts:main Aug 14, 2025
20 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.

3 participants