feat(XAxis): support height="auto" to size the axis to its tick labels by kimlj · Pull Request #7570 · recharts/recharts

kimlj · 2026-07-20T17:42:53Z

Adds height="auto" to XAxis, mirroring the existing YAxis width="auto" (#5880). When set, the axis height is measured from the rendered tick labels and axis label after layout, then dispatched back into the axis state, so rotated or multi-line tick labels are no longer clipped and don't need manual margin.bottom tuning.

The implementation mirrors the Y-axis path end to end:

getCalculatedXAxisHeight measures the tallest tick label plus tick size/margin and the axis label (analog of getCalculatedYAxisWidth).
CartesianAxis exposes getCalculatedHeight() on its ref.
XAxisImpl runs a useLayoutEffect that dispatches updateXAxisHeight when height === 'auto', with the same oscillation guard, and the same skips when label is a function or a React element.
height is typed number | 'auto'; the size and offset selectors fall back to DEFAULT_X_AXIS_HEIGHT (30) until measured, so the default behavior is unchanged.

Tests

New test/cartesian/XAxis/XAxis.autoHeight.spec.tsx covers the fixed-height control case and the dynamic "auto" case (calculated height 88 = 80 tick + 6 tick size + 2 tick margin).

Local checks: tsc --noEmit clean, eslint clean, existing XAxis/YAxis/state suites (848 tests) still green.

Summary by CodeRabbit

New Features
- Added automatic X-axis height calculation based on rendered tick labels and axis labels.
- X-axis height now accepts "auto" in addition to numeric values.
- Added a default X-axis height of 30 when no numeric height is available.
Bug Fixes
- Improved chart layout offsets when X-axis height is calculated dynamically.
- Prevented minor height oscillations during automatic sizing.
Tests
- Added coverage for numeric and automatic X-axis height behavior.

Mirror the existing YAxis width="auto" behavior. When height="auto", the axis height is measured from the rendered tick labels and axis label after layout and dispatched back into axis state, so rotated or multi-line tick labels are not clipped and do not need manual margin.bottom tuning. Opt-in; the default height (30) is unchanged. Fixes recharts#7301.

coderabbitai · 2026-07-20T17:43:30Z

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: 22334fb8-3ac0-40a4-a5a2-2a7a44ef4d5d

📥 Commits

Reviewing files that changed from the base of the PR and between 38020e8 and 51789be.

📒 Files selected for processing (12)

omnidoc/commentSimilarityExceptions.ts
scripts/snapshots/es6Files.txt
scripts/snapshots/libFiles.txt
scripts/snapshots/typesFiles.txt
src/cartesian/CartesianAxis.tsx
src/cartesian/XAxis.tsx
src/state/cartesianAxisSlice.ts
src/state/selectors/axisSelectors.ts
src/state/selectors/selectChartOffsetInternal.ts
src/util/Constants.ts
src/util/XAxisUtils.tsx
test/cartesian/XAxis/XAxis.autoHeight.spec.tsx

Walkthrough

Changes

XAxis automatic height

Layer / File(s)	Summary
Axis height measurement API `src/util/XAxisUtils.tsx`, `src/cartesian/CartesianAxis.tsx`	Adds DOM-based X-axis height calculation and exposes it through the Cartesian axis ref.
Height state and fallback sizing `src/state/cartesianAxisSlice.ts`, `src/state/selectors/...`, `src/util/Constants.ts`	Adds auto-height state, oscillation suppression, and a default height of `30` for non-numeric values.
XAxis auto-height integration and validation `src/cartesian/XAxis.tsx`, `test/cartesian/XAxis/`, `scripts/snapshots/`, `omnidoc/commentSimilarityExceptions.ts`	Supports `height="auto"`, measures rendered axes during layout, dispatches updates, and tests numeric and automatic heights.

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

Sequence Diagram(s)

sequenceDiagram
  participant XAxisImpl
  participant CartesianAxis
  participant XAxisUtils
  participant CartesianAxisSlice
  XAxisImpl->>CartesianAxis: render axis and label refs
  XAxisImpl->>CartesianAxis: request calculated height
  CartesianAxis->>XAxisUtils: measure ticks and label
  XAxisUtils-->>XAxisImpl: return rounded height
  XAxisImpl->>CartesianAxisSlice: dispatch updateXAxisHeight

Suggested reviewers: pavelvanecek, ckifer, pavelvanecek

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and accurately summarizes the main change: adding auto height support for XAxis.
Description check	✅ Passed	The description covers the change, motivation, testing, and linked issue, and is mostly complete for this template.
Linked Issues check	✅ Passed	The code implements `#7301` by adding XAxis height="auto" with measured layout updates and selector fallbacks.
Out of Scope Changes check	✅ Passed	The extra snapshot and comment-similarity updates support the new XAxis utility and API, so no clear out-of-scope changes stand out.

✨ 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 · 2026-07-20T17:48:01Z

Bundle Report

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

Detailed changes

Bundle name	Size	Change
recharts/bundle-cjs	1.47MB	5.26kB (0.36%) ⬆️
recharts/bundle-es6	1.29MB	4.96kB (0.39%) ⬆️
recharts/bundle-umd	592.94kB	1.24kB (0.21%) ⬆️
recharts/bundle-treeshaking-cartesian	736.84kB	4.69kB (0.64%) ⬆️
recharts/bundle-treeshaking-polar	480.96kB	285 bytes (0.06%) ⬆️
recharts/bundle-treeshaking-treemap	394.55kB	1.31kB (0.33%) ⬆️
recharts/bundle-treeshaking-sunburst*	349.65kB	-1.67kB (-0.48%) ⬇️
recharts/bundle-treeshaking-sankey*	383.14kB	-1.67kB (-0.44%) ⬇️

ℹ️ *Bundle size includes cached data from a previous commit

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`state/selectors/axisSelectors.js`	92 bytes	73.14kB	0.13%
`cartesian/CartesianAxis.js`	445 bytes	22.55kB	2.01%
`cartesian/XAxis.js`	1.43kB	11.17kB	14.72% ⚠️
`state/cartesianAxisSlice.js`	1.1kB	9.58kB	12.92% ⚠️
`state/selectors/selectChartOffsetInternal.js`	194 bytes	5.5kB	3.65%
`util/XAxisUtils.js` (New)	1.91kB	1.91kB	100.0% 🚀
`util/Constants.js`	96 bytes	1.36kB	7.62% ⚠️

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

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	1.31kB	394.55kB	0.33%

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`state/selectors/axisSelectors.js`	104 bytes	62.94kB	0.17%
`cartesian/CartesianAxis.js`	442 bytes	21.16kB	2.13%
`cartesian/XAxis.js`	1.39kB	9.74kB	16.64% ⚠️
`state/cartesianAxisSlice.js`	1.06kB	8.88kB	13.54% ⚠️
`state/selectors/selectChartOffsetInternal.js`	195 bytes	4.79kB	4.25%
`util/XAxisUtils.js` (New)	1.73kB	1.73kB	100.0% 🚀
`util/Constants.js`	39 bytes	945 bytes	4.3%

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

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	-1.67kB	383.14kB	-0.44%

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

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	-1.67kB	349.65kB	-0.48%

view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`Recharts.js`	1.24kB	592.94kB	0.21%

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

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	285 bytes	480.96kB	0.06%

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

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	4.69kB	736.84kB	0.64%

codecov · 2026-07-20T17:53:30Z

Codecov Report

❌ Patch coverage is 87.71930% with 7 lines in your changes missing coverage. Please review.
✅ Project coverage is 88.22%. Comparing base (ca62d1c) to head (51789be).
⚠️ Report is 6 commits behind head on main.

Files with missing lines	Patch %	Lines
src/state/cartesianAxisSlice.ts	64.28%	5 Missing ⚠️
src/cartesian/XAxis.tsx	94.11%	1 Missing ⚠️
src/util/XAxisUtils.tsx	94.11%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7570      +/-   ##
==========================================
+ Coverage   88.20%   88.22%   +0.02%     
==========================================
  Files         615      620       +5     
  Lines       14276    14443     +167     
  Branches     3591     3672      +81     
==========================================
+ Hits        12592    12743     +151     
- Misses       1494     1506      +12     
- Partials      190      194       +4

☔ 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 · 2026-07-20T18:34:38Z

Example on the website would be nice

PavelVanecek approved these changes Jul 20, 2026

View reviewed changes

PavelVanecek merged commit 9d9b15d into recharts:main Jul 20, 2026
57 of 58 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

feat(XAxis): support height="auto" to size the axis to its tick labels#7570
PavelVanecek merged 1 commit into
recharts:mainfrom
kimlj:feat/xaxis-auto-height

kimlj commented Jul 20, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 20, 2026 •

edited

Loading

❌ Failed checks (1 warning)

Uh oh!

codecov Bot commented Jul 20, 2026

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

codecov Bot commented Jul 20, 2026

Uh oh!

Uh oh!

PavelVanecek commented Jul 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

kimlj commented Jul 20, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tests

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

codecov Bot commented Jul 20, 2026

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

codecov Bot commented Jul 20, 2026

Codecov Report

Uh oh!

Uh oh!

PavelVanecek commented Jul 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kimlj commented Jul 20, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 20, 2026 •

edited

Loading