Skip to content

fix(Label): pass computed position attributes to custom label content#7549

Merged
PavelVanecek merged 2 commits into
recharts:mainfrom
MahinAnowar:fix/label-custom-content-position
Jul 18, 2026
Merged

fix(Label): pass computed position attributes to custom label content#7549
PavelVanecek merged 2 commits into
recharts:mainfrom
MahinAnowar:fix/label-custom-content-position

Conversation

@MahinAnowar

@MahinAnowar MahinAnowar commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

Description

Custom label content (content as element or function, e.g. <YAxis label={<MyLabel />} />) returned early from Label before the position was ever calculated, so it only received viewBox and the passthrough props — never the computed x/y/textAnchor/verticalAnchor the built-in Text label gets. That's the mechanism ckifer described in the issue thread ("does these calculations only if you aren't using a custom component").

This hoists the position calculation above the custom-content branches and merges the computed attributes into the props handed to cloneElement/createElement. It's additive: explicitly passed props still win, the built-in Text path renders exactly as before, and radial polar labels (insideStart/insideEnd/end) are unchanged since their rendering isn't attribute-based.

Two existing specs asserted the exact prop set custom content receives, so they now include the new attributes (Label.spec.tsx, Bar.spec.tsx) — the values they pin down (e.g. center of the viewBox) double as verification that the computed positions are correct.

Related Issue

Fixes #5067

Motivation and Context

Custom labels currently have to re-derive their own position from viewBox, duplicating logic recharts already has, and axis labels in particular land at (0,0)/unpositioned. With this change a custom label can just use props.x/props.y like the built-in label does.

How Has This Been Tested?

New regression test rendering <YAxis label={<CustomLabel />} /> in a LineChart and asserting the custom element receives numeric x/y — fails on current main, passes with this change. Updated prop-set assertions in Label.spec.tsx (6 sites) and Bar.spec.tsx also fail on main and pass now. Full Label, LabelList and Bar suites pass (165 tests), plus tsc and eslint on the changed files; the rest of the unit suite matches the baseline.

Screenshots (if appropriate):

n/a — no visual change for built-in labels; custom labels keep rendering whatever they render, they just receive more props.

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

Summary by CodeRabbit

  • Bug Fixes
    • Improved label positioning across polar and cartesian charts.
    • Prevented labels from rendering when required positioning data is unavailable.
    • Fixed radial labels so they render correctly in supported polar positions.
    • Content callbacks now receive accurate x and y coordinates.
    • Custom Y-axis label elements now receive computed coordinates consistently.

@coderabbitai

coderabbitai Bot commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8e78fbc3-92dd-480c-95c1-d7b26132687b

📥 Commits

Reviewing files that changed from the base of the PR and between cf68c56 and 5c5a281.

📒 Files selected for processing (2)
  • src/component/Label.tsx
  • test/component/Label.spec.tsx
💤 Files with no reviewable changes (1)
  • test/component/Label.spec.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/component/Label.tsx

Walkthrough

Label now computes cartesian coordinates into positionAttrs, separates radial polar rendering, and skips rendering when attributes are unavailable. Tests cover callback coordinates and custom YAxis label coordinates.

Changes

Label positioning

Layer / File(s) Summary
Positioning and rendering
src/component/Label.tsx
Cartesian and non-radial polar labels compute position attributes separately, while radial polar labels render through their dedicated path and missing attributes return null.
Coordinate validation
test/component/Label.spec.tsx
Content callbacks now expect computed x and y values, and a custom YAxis label test verifies numeric coordinates.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

Suggested reviewers: ckifer

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title is concise and accurately summarizes the main fix for custom label content positioning.
Description check ✅ Passed The description follows the template and includes the required issue link, motivation, testing, and change type sections.
Linked Issues check ✅ Passed The PR addresses #5067 by passing computed x/y positioning props to custom label content and adding regression coverage.
Out of Scope Changes check ✅ Passed The changes stay focused on label positioning and related test updates, with no clear unrelated additions.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
✨ 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.

@codecov

codecov Bot commented Jul 13, 2026

Copy link
Copy Markdown

Bundle Report

Changes will increase total bundle size by 7.75kB (0.14%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
recharts/bundle-cjs 1.45MB 2.18kB (0.15%) ⬆️
recharts/bundle-es6 1.28MB 2.18kB (0.17%) ⬆️
recharts/bundle-umd 586.82kB 389 bytes (0.07%) ⬆️
recharts/bundle-treeshaking-cartesian 727.03kB 1.36kB (0.19%) ⬆️
recharts/bundle-treeshaking-polar 477.85kB 1.0kB (0.21%) ⬆️
recharts/bundle-treeshaking-treemap 391.57kB 635 bytes (0.16%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-treeshaking-cartesian

Assets Changed:

Asset Name Size Change Total Size Change (%)
bundle.js 1.36kB 727.03kB 0.19%
view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name Size Change Total Size Change (%)
cartesian/Brush.js 353 bytes 30.45kB 1.17%
component/Label.js 1.0kB 15.76kB 6.78% ⚠️
util/types.js 195 bytes 9.7kB 2.05%
util/getActiveCoordinate.js 635 bytes 7.99kB 8.63% ⚠️
view changes for bundle: recharts/bundle-treeshaking-polar

Assets Changed:

Asset Name Size Change Total Size Change (%)
bundle.js 1.0kB 477.85kB 0.21%
view changes for bundle: recharts/bundle-treeshaking-treemap

Assets Changed:

Asset Name Size Change Total Size Change (%)
bundle.js 635 bytes 391.57kB 0.16%
view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name Size Change Total Size Change (%)
cartesian/Brush.js 353 bytes 31.77kB 1.12%
component/Label.js 1.0kB 17.49kB 6.07% ⚠️
util/types.js 195 bytes 10.12kB 1.97%
util/getActiveCoordinate.js 635 bytes 8.49kB 8.08% ⚠️
view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name Size Change Total Size Change (%)
Recharts.js 389 bytes 586.82kB 0.07%

@codecov

codecov Bot commented Jul 13, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 93.75000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 88.20%. Comparing base (b6ba1ad) to head (5c5a281).
⚠️ Report is 9 commits behind head on main.

Files with missing lines Patch % Lines
src/component/Label.tsx 93.75% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #7549      +/-   ##
==========================================
+ Coverage   88.18%   88.20%   +0.01%     
==========================================
  Files         613      615       +2     
  Lines       14258    14276      +18     
  Branches     3589     3592       +3     
==========================================
+ Hits        12574    12592      +18     
  Misses       1494     1494              
  Partials      190      190              

☔ View full report in Codecov by Harness.
📢 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
PavelVanecek merged commit ca62d1c into recharts:main Jul 18, 2026
58 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.

Custom Labels are not given X or Y coords in props

2 participants