Skip to content

docs: clarify custom labels and ticks need SVG elements#7524

Merged
PavelVanecek merged 2 commits into
recharts:mainfrom
ishaanlabs-gg:docs-svg-label-tick-elements
Jul 3, 2026
Merged

docs: clarify custom labels and ticks need SVG elements#7524
PavelVanecek merged 2 commits into
recharts:mainfrom
ishaanlabs-gg:docs-svg-label-tick-elements

Conversation

@ishaanlabs-gg

@ishaanlabs-gg ishaanlabs-gg commented Jul 2, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

Description

Clarifies that custom label, Label, LabelList, XAxis tick, and YAxis tick React elements need to be SVG elements/components, not HTML elements such as <div>.

Related Issue

Refs #3177

Motivation and Context

Issue #3177 includes a request to document React DOM warnings when an HTML element is used as chart label/tick content. These prop comments feed the generated API documentation, so this makes the supported custom-rendering surface explicit near the affected props.

How Has This Been Tested?

  • git diff --check HEAD~1 HEAD
  • Verified the new guidance appears in the affected source comments with grep

Screenshots (if appropriate):

N/A

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

  • Documentation
    • Clarified guidance across chart components for label, tick, and label content to use SVG-based React elements (e.g., <text>/<g>).
    • Added explicit warnings in prop docs that HTML elements like <div> are invalid inside SVG-rendered charts and may trigger React DOM warnings.
    • Updated label-related documentation consistently, including Treemap and axis label typings.

@coderabbitai

coderabbitai Bot commented Jul 2, 2026 •
edited
Loading

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: 7d2b42ae-a195-40a6-843d-20bbafde344e

📥 Commits

Reviewing files that changed from the base of the PR and between f9eabb3 and fad9df0.

📒 Files selected for processing (12)
  • omnidoc/commentSimilarityExceptions.ts
  • src/cartesian/Area.tsx
  • src/cartesian/Bar.tsx
  • src/cartesian/ReferenceArea.tsx
  • src/cartesian/ReferenceDot.tsx
  • src/cartesian/ReferenceLine.tsx
  • src/cartesian/Scatter.tsx
  • src/chart/Treemap.tsx
  • src/polar/Pie.tsx
  • src/polar/Radar.tsx
  • src/polar/RadialBar.tsx
  • src/util/types.ts
✅ Files skipped from review due to trivial changes (11)
  • src/cartesian/Scatter.tsx
  • src/util/types.ts
  • src/cartesian/ReferenceLine.tsx
  • src/chart/Treemap.tsx
  • src/polar/RadialBar.tsx
  • src/polar/Radar.tsx
  • src/polar/Pie.tsx
  • src/cartesian/ReferenceArea.tsx
  • src/cartesian/ReferenceDot.tsx
  • src/cartesian/Area.tsx
  • src/cartesian/Bar.tsx

Walkthrough

This PR updates JSDoc comments across chart label, tick, and content props to clarify that custom React elements must use SVG elements, and adds a comment similarity exception for LabelList content. No runtime logic changed.

Changes

SVG-only prop documentation

Layer / File(s) Summary
Clarify SVG-only ReactElement/content documentation
src/cartesian/Line.tsx, src/cartesian/XAxis.tsx, src/cartesian/YAxis.tsx, src/component/Label.tsx, src/component/LabelList.tsx, src/cartesian/Area.tsx, src/cartesian/Bar.tsx, src/cartesian/ReferenceArea.tsx, src/cartesian/ReferenceDot.tsx, src/cartesian/ReferenceLine.tsx, src/cartesian/Scatter.tsx, src/chart/Treemap.tsx, src/polar/Pie.tsx, src/polar/Radar.tsx, src/polar/RadialBar.tsx, src/util/types.ts		 JSDoc comments for label, tick, and content props are reworded to specify that provided ReactElements must be SVG elements/components, warning that HTML elements are invalid within chart SVG and may trigger React DOM warnings.
Add LabelList similarity exception
omnidoc/commentSimilarityExceptions.ts		 A permanent exception entry is added for LabelList content with an updated rationale for its distinct JSDoc comment.

Estimated code review effort: 1 (Trivial) | ~4 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 reflects the main documentation change about SVG-only custom labels and ticks.
Description check ✅ Passed The description follows the template and covers the change, related issue, motivation, testing, and checklist items.
Linked Issues check ✅ Passed The PR addresses #3177 by documenting SVG-only custom rendering for label and tick props across the affected components.
Out of Scope Changes check ✅ Passed The added Omnidoc exception is directly related to keeping the new documentation consistent, so it is in scope.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ 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.

@PavelVanecek

PavelVanecek commented Jul 2, 2026

Copy link
Copy Markdown
Collaborator

Can you double check the issue number? I don't think that's related.

@codecov

codecov Bot commented Jul 2, 2026

Copy link
Copy Markdown

Bundle Report

Bundle size has no change ✅

@ishaanlabs-gg

ishaanlabs-gg commented Jul 2, 2026

Copy link
Copy Markdown
Contributor Author

Good catch. #3177 includes the docs request for HTML elements used as labels, but the issue also has broader follow-up discussion. I changed this from Closes #3177 to Refs #3177, and pushed a consistency fix for the Omnidoc failures.

@codecov

codecov Bot commented Jul 2, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.15%. Comparing base (c04f1a7) to head (fad9df0).

Additional details and impacted files 
@@           Coverage Diff           @@
##             main    #7524   +/-   ##
=======================================
  Coverage   88.15%   88.15%           
=======================================
  Files         609      609           
  Lines       14227    14227           
  Branches     3568     3569    +1     
=======================================
  Hits        12542    12542           
  Misses       1495     1495           
  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 6f10d53 into recharts:main Jul 3, 2026
58 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

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

@ishaanlabs-gg @PavelVanecek