Add support for responsive y-axis width by saurabhraj123 · Pull Request #5880 · recharts/recharts

saurabhraj123 · 2025-05-29T18:29:43Z

Summary

A fixed width of 60px is given to the y-axis by default. If the label size increases, it overflows. Added a prop named isWidthResponsive, which dynamically calculates the yAxis width based on the width of the ticks.

Refer to this issue: #5861

Description

I have added a new prop named isWidthResponsive. When this is made true, it dynamically calculates the width of the y-axis when:

The label prop is either a string/number or an object.
If the label prop is a function or a react element, default width of 60px is used as the old flow.

The following logic is used to achieve the same:

Calculate width of each y-axis label and find out the maximum width.
If valid label prop is present, it calculates its width as well along with tickWidth and tickMargin.
Now the final calculated width = maxWidth + tickWidth + tickMargin + 5px. A 5px gap is for gap between the tick and the y-axis label.

This PR rotates the y-axis label to 270 degrees by default as its the most commonly used layout.

Related Issue

#5861 #2027

Motivation and Context

This feature is long awaited and being asked for since 2017 - Refer #947. When I worked on it, I had to do a lot of customisations to achieve this but I feel this feature should be present by default.

How Has This Been Tested?

I have done manual testing by examining different charts in the storybook. Also, the automated test cases are used.

Screenshots (if appropriate):

Before:

After:

Without labels:

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 extended an existing story to show my changes

ckifer · 2025-05-30T01:58:40Z

Can you add some unit tests

PavelVanecek · 2025-05-30T07:16:48Z

Before looking into code, is it possible to have the API as width="auto"? If we add a new prop then we have to define what happens when people pass in both width and isWidthResponsive. Discoverability suffers.

PavelVanecek

Okay the "after" variant looks much better. Let's have that as a new breaking change in 3.x @ckifer?

@saurabhraj123 thank you for the PR. Would you mind to fix the conflicts? Then we can have a look at what the CI build looks like and what is the visual diff.

…feature/responsive-y-axis-width

saurabhraj123 · 2025-05-30T10:25:23Z

Before looking into code, is it possible to have the API as width="auto"? If we add a new prop then we have to define what happens when people pass in both width and isWidthResponsive. Discoverability suffers.

You're right. The width="auto" property makes more sense. I will use that.

saurabhraj123 · 2025-05-30T10:27:26Z

Can you add some unit tests

I will work on it @ckifer.

PavelVanecek · 2025-05-30T11:47:38Z

Run npm run test-build-output -- --update to get new bundle file snapshots, that will fix the build

PavelVanecek · 2025-05-30T11:52:29Z

Also, the YAxis label can be defined two different ways, 1. with label prop or 2. with <YAxis><Label /> child component, do your changes work with both?

saurabhraj123 · 2025-05-30T15:31:23Z

Run npm run test-build-output -- --update to get new bundle file snapshots, that will fix the build

The command runs successfully in local but produces no change. Do I need to do something else?

ckifer · 2025-05-30T15:39:49Z

If it's not working you can also add to the snapshots manually if you look at the failing build

PavelVanecek · 2025-05-31T00:40:40Z

Run npm run test-build-output -- --update to get new bundle file snapshots, that will fix the build

The command runs successfully in local but produces no change. Do I need to do something else?

Ah sorry I forgot. First npm run build that will generate the bundles, then npm run test-build-output -- --update that will update the bundle snapshot. Then you can run npm run build again to verify that it worked, commit and push.

codecov · 2025-06-02T06:15:30Z

Codecov Report

Attention: Patch coverage is 97.20670% with 5 lines in your changes missing coverage. Please review.

Project coverage is 95.63%. Comparing base (c0a9192) to head (2fb6a50).
Report is 7 commits behind head on 3.x.

Files with missing lines	Patch %	Lines
src/component/Text.tsx	96.05%	3 Missing ⚠️
src/util/YAxisUtils.tsx	92.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##              3.x    #5880      +/-   ##
==========================================
+ Coverage   95.61%   95.63%   +0.01%     
==========================================
  Files         187      188       +1     
  Lines       18975    19064      +89     
  Branches     3805     3823      +18     
==========================================
+ Hits        18143    18231      +88     
- Misses        826      827       +1     
  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.

Label width calculation will be handled in another PR

Copilot

Pull Request Overview

Adds dynamic sizing support for the Y-axis by allowing width="auto", measuring tick and label dimensions at runtime, and updating the axis width in state.

Introduce getCalculatedYAxisWidth utility and tests for responsive sizing
Extend state slice, selectors, and constants to handle a new auto width option
Update YAxis, CartesianAxis, Label, and Text to measure elements via refs and dispatch width updates

Reviewed Changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
test/cartesian/YAxis.spec.tsx	Add tests for fixed and dynamically calculated Y-axis width
src/util/YAxisUtils.tsx	New utility to measure tick/label widths for responsive layout
src/util/Constants.ts	Define `DEFAULT_Y_AXIS_WIDTH` constant
src/state/selectors/selectChartOffset.ts	Fallback to default width when axis width is non-numeric
src/state/selectors/axisSelectors.ts	Use constant default for both implicit and selected Y-axis widths
src/state/cartesianAxisSlice.ts	Extend Y-axis settings to accept `auto` and add update action
src/component/Text.tsx	Convert `Text` to `forwardRef` to support measuring rendered text
src/component/Label.tsx	Pass `labelRef` through to `Text` for measurement
src/cartesian/YAxis.tsx	Hook into layout effect to calculate and dispatch dynamic width
src/cartesian/CartesianAxis.tsx	Track tick nodes via ref to measure their sizes

Comments suppressed due to low confidence (2)

test/cartesian/YAxis.spec.tsx:2160

The test covers tick-based width calculation via getCalculatedYAxisWidth but does not cover scenarios with axis labels. Consider adding a test that provides a labelRef and verifies label width and gap are accounted for in the calculated width.

it('should render y-axis with dynamically calculated width', async () => {

src/cartesian/YAxis.tsx:36

PR summary mentions a prop 'isWidthResponsive' but the code uses width='auto' for dynamic sizing. Update the documentation or prop name to avoid confusion and ensure alignment between feature description and implementation.

interface YAxisProps extends BaseAxisProps {

saurabhraj123 · 2025-06-04T11:10:57Z

@saurabhraj123 the build failures are unrelated to your changes. I have fixed that on 3.x branch. May I please ask you to merge or rebase?

My branch is already up to date with 3.x @PavelVanecek. Ran build commands as well, no changes are reflected.

ckifer · 2025-06-04T13:06:53Z

Looks like the vitest downgrade hasn't been merged into your branch. Make sure to do a fresh npm install

…feature/responsive-y-axis-width

PavelVanecek · 2025-06-05T14:33:33Z

Would you like to add the new property to the storybook and docs too, to make it easier to find for other devs?

PavelVanecek · 2025-06-05T14:34:01Z

No visual diff in the storybook: https://www.chromatic.com/build?appId=63da8268a0da9970db6992aa&number=2358

saurabhraj123 · 2025-06-05T16:26:53Z

Would you like to add the new property to the storybook and docs too, to make it easier to find for other devs?

I will @PavelVanecek. Also, I will create a follow up PR to add support for the labels.

PavelVanecek · 2025-06-05T16:34:12Z

Thanks!

## Description Adding `width='auto'` support in storybook. Refer to this: #5880 **Implementation summary:** Changed control type to `text` for YAxis. Then inside `YAxis.stories.tsx`, wrote a function to convert entered text to number or 'auto' and passed it to YAxis.  ## Related Issue #5880     ## How Has This Been Tested? By entering different values in the input field for width.    ## Types of changes - [ ] Bug fix (non-breaking change which fixes an issue) - [x] 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. - [x] I have added a storybook story or extended an existing story to show my changes

hc-12 · 2025-06-17T23:29:43Z

Hi, i need this feature. Has this been released in v3 beta?

ckifer · 2025-06-17T23:46:49Z

Not yet but looking at releasing 3.0 shortly

ckifer · 2025-06-18T16:06:45Z

released beta.2 for the time being

ckifer · 2025-06-25T00:58:55Z

    }

-    return <Label key="label-implicit" content={label} viewBox={viewBox} />;
+    return <Label key="label-implicit" content={label} {...commonProps} />;


when label is an HTML or SVG element label gets passed to content and then content is cloned with props. props includes labelRef which isn't a valid prop in the DOM

## Description `labelRef` was being passed to a DOM node. It is not a valid node prop and was causing warning. ## Related Issue #6004 #5880     ## Types of changes  - [x] 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 extended an existing story to show my changes

saurabhraj123 added 7 commits May 29, 2025 22:20

feat: add responsive y-axis support

54c2a65

fix: failing test case

9f36a92

chore: add missing dependency

db44e8a

fix: typescript issue with TextAnchor

30565b7

fix: use string type for textAnchor and verticalAlign

62e9e05

chore: remove the gap when label is not present

2f18a87

chore: add js docs for getCalculatedYAxisWidth

51a6ed6

PavelVanecek requested review from PavelVanecek and Copilot May 30, 2025 07:27

This comment was marked as outdated.

Sign in to view

PavelVanecek requested changes May 30, 2025

View reviewed changes

Comment thread src/cartesian/CartesianAxis.tsx Outdated

Comment thread src/cartesian/CartesianAxis.tsx Outdated

Comment thread src/util/YAxisUtils.tsx Outdated

saurabhraj123 added 3 commits May 30, 2025 15:09

Merge branch '3.x' of https://github.com/saurabhraj123/recharts into …

4676125

…feature/responsive-y-axis-width

refactor: remove unnecessary uses of the 'as' keyword

4329880

chore: esModuleInterop flag import fix

8af2339

saurabhraj123 marked this pull request as draft May 30, 2025 15:27

saurabhraj123 marked this pull request as ready for review May 30, 2025 15:28

ckifer reviewed May 30, 2025

View reviewed changes

Comment thread src/cartesian/CartesianAxis.tsx Outdated

Comment thread src/util/YAxisUtils.tsx Outdated

Comment thread src/component/Text.tsx

saurabhraj123 added 2 commits June 1, 2025 23:11

fix: build issue by updating the snapshot

79255e9

chore: use width=auto instead of isWidthResponsive

750f03b

chore: remove label related code

a7a8bb1

Label width calculation will be handled in another PR

PavelVanecek reviewed Jun 4, 2025

View reviewed changes

Comment thread src/util/YAxisUtils.tsx Outdated

PavelVanecek reviewed Jun 4, 2025

View reviewed changes

Comment thread src/util/YAxisUtils.tsx Outdated

PavelVanecek requested a review from Copilot June 4, 2025 10:54

Copilot AI reviewed Jun 4, 2025

View reviewed changes

Comment thread src/util/YAxisUtils.tsx Outdated

Comment thread src/cartesian/CartesianAxis.tsx

Comment thread src/cartesian/YAxis.tsx Outdated

saurabhraj123 marked this pull request as draft June 4, 2025 11:08

saurabhraj123 marked this pull request as ready for review June 4, 2025 11:08

saurabhraj123 added 3 commits June 4, 2025 19:45

Merge branch '3.x' of https://github.com/saurabhraj123/recharts into …

1fda877

…feature/responsive-y-axis-width

refactor: pass getCalculatedYAxisWidth required params from outside

f603546

fix: add tick in useEffect dependency

2fb6a50

ckifer approved these changes Jun 4, 2025

View reviewed changes

ckifer requested a review from PavelVanecek June 4, 2025 16:48

PavelVanecek approved these changes Jun 5, 2025

View reviewed changes

ckifer merged commit 92916eb into recharts:3.x Jun 5, 2025

saurabhraj123 mentioned this pull request Jun 6, 2025

Add width 'auto' support in storybook #5925

Merged

7 tasks

ckifer mentioned this pull request Jun 25, 2025

Bug: Reference components label prop fails to render a custom component #6004

Closed

ckifer reviewed Jun 25, 2025

View reviewed changes

saurabhraj123 mentioned this pull request Jun 25, 2025

fix: labelRef being passed to DOM node causing warning #6008

Merged

7 tasks

Leong-Qi-Jin mentioned this pull request May 6, 2026

Allow XAxis to have auto-height similar to YAxis' auto-width #7301

Closed

kimlj mentioned this pull request Jul 20, 2026

feat(XAxis): support height="auto" to size the axis to its tick labels #7570

Merged

Uh oh!

Uh oh!

Conversation

saurabhraj123 commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

Uh oh!

ckifer commented May 30, 2025

Uh oh!

PavelVanecek commented May 30, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

PavelVanecek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

saurabhraj123 commented May 30, 2025

Uh oh!

saurabhraj123 commented May 30, 2025

Uh oh!

PavelVanecek commented May 30, 2025

Uh oh!

PavelVanecek commented May 30, 2025

Uh oh!

saurabhraj123 commented May 30, 2025

Uh oh!

ckifer commented May 30, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

PavelVanecek commented May 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Jun 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

saurabhraj123 commented Jun 4, 2025

Uh oh!

ckifer commented Jun 4, 2025

Uh oh!

PavelVanecek commented Jun 5, 2025

Uh oh!

PavelVanecek commented Jun 5, 2025

Uh oh!

saurabhraj123 commented Jun 5, 2025

Uh oh!

PavelVanecek commented Jun 5, 2025

Uh oh!

hc-12 commented Jun 17, 2025

Uh oh!

ckifer commented Jun 17, 2025

Uh oh!

ckifer commented Jun 18, 2025

Uh oh!

ckifer Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

saurabhraj123 commented May 29, 2025 •

edited

Loading

PavelVanecek commented May 31, 2025 •

edited

Loading

codecov Bot commented Jun 2, 2025 •

edited

Loading