Allow overwriting Label textAnchor prop by PavelVanecek · Pull Request #6547 · recharts/recharts

PavelVanecek · 2025-11-01T07:39:54Z

Description

textAnchor is calculated internally based on the position but sometimes one may want to set a custom textAnchor so let's do that.

Related Issue

Fixes #6545

Fixes #6345 - now we have the storybook for playing around with the props, and www/api/Label for gallery of all possible options. I added a link.

Types of changes

Is this a bugfix? Or a new feature? Dunno. Text had the same prop since forever. It was coming to Label via SVGProps<SVGTextElement>.

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

Summary by CodeRabbit

Release Notes

New Features
- Added new Label component props with interactive controls: zIndex, angle, textAnchor, and textBreakAll.
Documentation
- Enhanced Label component Storybook stories with improved prop organization, categorization, and interactive controls.
- Added reference link to Label API documentation.
Bug Fixes
- Improved text anchor validation logic with fallback handling for better rendering reliability.

coderabbitai · 2025-11-01T07:40:04Z

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (6)

test-vr/__snapshots__/tests/www/LabelApiExamples.spec-vr.tsx-snapshots/LabelBarChartExample-1-chromium-linux.png is excluded by !**/*.png
test-vr/__snapshots__/tests/www/LabelApiExamples.spec-vr.tsx-snapshots/LabelBarChartExample-1-firefox-linux.png is excluded by !**/*.png
test-vr/__snapshots__/tests/www/LabelApiExamples.spec-vr.tsx-snapshots/LabelBarChartExample-1-webkit-linux.png is excluded by !**/*.png
test-vr/__snapshots__/tests/www/LabelListApiExamples.spec-vr.tsx-snapshots/LabelListChartExample-1-chromium-linux.png is excluded by !**/*.png
test-vr/__snapshots__/tests/www/LabelListApiExamples.spec-vr.tsx-snapshots/LabelListChartExample-1-firefox-linux.png is excluded by !**/*.png
test-vr/__snapshots__/tests/www/LabelListApiExamples.spec-vr.tsx-snapshots/LabelListChartExample-1-webkit-linux.png is excluded by !**/*.png

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The PR fixes textAnchor validation in Label components and restructures Label storybook stories. It adds a type guard for validating textAnchor values, implements fallback logic to use computed positioning when invalid, and replaces multi-position iteration with single dynamically-positioned labels in storybook examples.

Changes

Cohort / File(s)	Summary
Core component changes `src/component/Text.tsx`, `src/component/Label.tsx`	Adds type guard `isValidTextAnchor()` to validate textAnchor values; Label now imports and uses this to apply fallback positioning when textAnchor is invalid.
Storybook arguments and props `storybook/StorybookArgs.ts`, `storybook/stories/API/props/LabelListProps.ts`	Adds optional `disable` property to StorybookArgs table metadata; updates LabelListProps category from "General" to "Position".
Storybook Label documentation `storybook/stories/API/component/Label.mdx`, `storybook/stories/API/component/Label.stories.tsx`	Adds API reference link in documentation; refactors stories to render single labels with dynamic position instead of iterating multiple positions, adds props (zIndex, angle, textAnchor, textBreakAll), and increases chart margins.

Sequence Diagram

sequenceDiagram
    participant User as User/Chart
    participant Label as Label Component
    participant Text as Text Component
    participant Validation as isValidTextAnchor()
    
    User->>Label: Pass textAnchor value
    Label->>Validation: Validate textAnchor
    alt Valid textAnchor
        Validation-->>Label: true
        Label->>Text: Use provided textAnchor
    else Invalid textAnchor
        Validation-->>Label: false
        Label->>Label: Use computed positionAttrs.textAnchor
        Label->>Text: Use fallback textAnchor
    end
    Text-->>User: Render with textAnchor

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Label.tsx: Review validation logic integration and fallback behavior to ensure textAnchor is correctly applied
Label.stories.tsx: Verify refactoring from multi-position iteration to single dynamic positioning doesn't break story functionality; confirm new props and margins are correctly configured
StorybookArgs.ts and LabelListProps.ts: Confirm metadata changes align with documentation tooling expectations

Suggested reviewers

ckifer

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The PR title "Allow overwriting Label textAnchor prop" is directly related to the main change in the pull request. The title accurately summarizes the primary objective: enabling users to override the internal textAnchor calculation by setting a custom value, rather than having it always overwritten. The title is concise, clear, and specific enough that a teammate reviewing the history would immediately understand the core change.
Linked Issues Check	✅ Passed	The PR successfully addresses both linked issues. For issue #6545, the changes in Label.tsx and Text.tsx introduce validation logic via isValidTextAnchor and fallback handling, enabling users to override textAnchor instead of having it always overwritten by internal calculations. For issue #6345, the Storybook refactoring in Label.stories.tsx removes the multi-position iteration that caused stacking, replacing it with dynamic single-position rendering via args, which allows proper positioning of labels in stories. Both coding objectives from the linked issues are met by the implemented changes.
Out of Scope Changes Check	✅ Passed	All changes in the PR are appropriately scoped to the linked issues. The core changes in Label.tsx and Text.tsx directly implement textAnchor override functionality for issue #6545. The extensive Storybook changes address issue #6345 by restructuring stories to eliminate label stacking. Supporting changes like the addition of the disable property in StorybookArgs.ts serve to hide internal props in Storybook documentation, which is part of the broader storybook improvement effort. Minor organizational updates to LabelListProps.ts are consistent with the documentation refinement goals. No out-of-scope changes are evident.
Description Check	✅ Passed	The PR description covers the main required sections from the template: it provides a clear description of the change, links to related issues (#6545 and #6345), marks the change type as a bug fix, and indicates that a Storybook story was added. While some non-critical sections like "Motivation and Context" (formatted as a separate heading in the template) and "How Has This Been Tested" are not explicitly filled, the description does contain sufficient context explaining the problem and solution. The required information for understanding the change is present.

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

codecov · 2025-11-01T07:50:03Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.62%. Comparing base (770206f) to head (55d2752).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6547   +/-   ##
=======================================
  Coverage   91.62%   91.62%           
=======================================
  Files         483      483           
  Lines       40267    40271    +4     
  Branches     4568     4570    +2     
=======================================
+ Hits        36896    36900    +4     
  Misses       3355     3355           
  Partials       16       16

☔ 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 · 2025-11-01T07:50:22Z

Bundle Report

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

Detailed changes

Bundle name	Size	Change
recharts/bundle-cjs	1.11MB	421 bytes (0.04%) ⬆️
recharts/bundle-es6	962.3kB	389 bytes (0.04%) ⬆️
recharts/bundle-umd	507.29kB	129 bytes (0.03%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`Recharts.js`	129 bytes	507.29kB	0.03%

view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`component/Label.js`	244 bytes	20.16kB	1.23%
`component/Text.js`	177 bytes	10.23kB	1.76%

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`component/Label.js`	252 bytes	18.34kB	1.39%
`component/Text.js`	137 bytes	9.06kB	1.53%

github-actions · 2025-11-01T08:04:30Z

Visual Regression tests failed.

Live Report URL: http://recharts.github.io/recharts/vr-report/label-textanchor
This URL is temporary and may be overwritten by other PRs. If that happens, download the artifact:
Artifact Download: Download report artifact
This link provides a stable copy of the report for this specific run.

To update snapshots: Comment /update-snapshots on this PR to automatically update the baseline screenshots.

PavelVanecek · 2025-11-01T08:11:04Z

Both of those failed tests have an explicit textAnchor prop set which didn't work before and now it does so I call that a success. /update-snapshots

PavelVanecek · 2025-11-01T08:12:14Z

https://github.com/recharts/recharts/actions/runs/18993874305

PavelVanecek · 2025-11-01T08:47:24Z

Okay I merged #6548 let's try this again. /update-snapshots

github-actions · 2025-11-01T09:00:58Z

✅ Visual regression snapshots have been updated and committed to this PR.

PavelVanecek · 2025-11-01T09:06:06Z

It worked!!!

ckifer · 2025-11-01T20:22:16Z

Sweet

PavelVanecek added 2 commits November 1, 2025 16:33

Refresh Label story so that it is easier to use

a292cda

Allow overwriting textAnchor via props

55d2752

chore: update visual regression snapshots

521b49a

ckifer approved these changes Nov 2, 2025

View reviewed changes

ckifer merged commit 8915253 into main Nov 2, 2025
4 checks passed

ckifer deleted the label-textanchor branch November 2, 2025 03:29

PavelVanecek mentioned this pull request Nov 9, 2025

Add textAnchor prop to Label #2109

Closed

1 task

coderabbitai bot mentioned this pull request Dec 27, 2025

Isolate Label positioning logic to new file #6829

Merged

8 tasks

coderabbitai bot mentioned this pull request Feb 19, 2026

fix: respect user-provided textAnchor prop on XAxis/YAxis #7028

Merged

Uh oh!

Conversation

PavelVanecek commented Nov 1, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue

Types of changes

Checklist:

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai bot commented Nov 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

codecov bot commented Nov 1, 2025

Codecov Report

Uh oh!

codecov bot commented Nov 1, 2025

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

github-actions bot commented Nov 1, 2025

Uh oh!

PavelVanecek commented Nov 1, 2025

Uh oh!

PavelVanecek commented Nov 1, 2025

Uh oh!

PavelVanecek commented Nov 1, 2025

Uh oh!

github-actions bot commented Nov 1, 2025

Uh oh!

PavelVanecek commented Nov 1, 2025

Uh oh!

ckifer commented Nov 1, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

PavelVanecek commented Nov 1, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Nov 1, 2025 •

edited

Loading