NotificationsYou must be signed in to change notification settings
Fork1.8k
Star26k

Make rest of the examples responsive, add guide for setting sizes#6417

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Jump to bottom

Open

PavelVanecek wants to merge16 commits intomain

base:main

Choose a base branch

fromresponsive-cont

Open

Make rest of the examples responsive, add guide for setting sizes#6417

PavelVanecek wants to merge16 commits intomainfromresponsive-cont

+1,300 −336

Conversation

Copy link

Collaborator

PavelVanecek commentedOct 5, 2025

Description

Now all charts on the website should be responsive.

PavelVanecek added12 commits

October 5, 2025 21:03

PieChart examples are responsive

6dfe61a

RadarChart examples are responsive

e383f1f

RadialBarChart examples are responsive

828e8dc

Swap Google analytics ID for unique one

ac0ab3f

Treemap examples are responsive

907bb21

Tooltip examples are responsive

d2d918e

Legend examples are responsive

a2613ae

Add ChartSizing component and update navigation for chart sizes and l…

4d7e5ca

…ayout

Add PieChartInFlexbox example and update ChartSizing documentation fo…

550819d

…r responsive layouts

Add PieChartInGrid example for responsive layouts

c8dd77c

Update snapshot

be9e730

Vitest doesn't like importing scss but fortunately these files are va…

1a2a951

…lid CSS anyway

PavelVanecek requested a review fromCopilot

October 5, 2025 13:40

Copy link

codecovbot commentedOct 5, 2025•
edited
Loading

Codecov Report

❌ Patch coverage is79.36508% with104 lines in your changes missing coverage. Please review.
✅ Project coverage is 93.83%. Comparing base (00edabb) to head (d156c67).

Files with missing lines	Patch %	Lines
www/src/components/GuideView/ChartSizing.tsx	8.03%	103 Missing⚠️
www/src/components/analytics.ts	0.00%	1 Missing⚠️

Additional details and impacted files

@@            Coverage Diff             @@##             main    #6417      +/-   ##==========================================+ Coverage   93.54%   93.83%   +0.28%==========================================  Files         412      414       +2       Lines       37976    38196     +220       Branches     4474     4470       -4     ==========================================+ Hits        35526    35840     +314+ Misses       2423     2339      -84+ Partials       27       17      -10

☔ 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.

Copy link

codecovbot commentedOct 5, 2025•
edited
Loading

Bundle Report

Changes will decrease total bundle size by 222 bytes (-0.01%) ⬇️. This is within theconfigured threshold ✅

Detailed changes

Bundle name	Size	Change
recharts/bundle-cjs	1.07MB	-91 bytes (-0.01%) ⬇️
recharts/bundle-es6	923.23kB	-91 bytes (-0.01%) ⬇️
recharts/bundle-umd	492.05kB	-40 bytes (-0.01%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`chart/RechartsWrapper.js`	-91 bytes	12.42kB	-0.73%

view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`chart/RechartsWrapper.js`	-91 bytes	14.26kB	-0.63%

view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`Recharts.js`	-40 bytes	492.05kB	-0.01%

CopilotAI reviewed

Oct 5, 2025

View reviewed changes

Copy link

Contributor

CopilotAI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Pull Request Overview

Adds responsive behavior to remaining chart examples and introduces a new “Chart sizes and layout” guide to document sizing strategies.

Registers a new guide page (sizes) and updates navigation/localization.
Refactors many examples to use the responsive prop and CSS sizing; removes an outdated Pie example and adds new Flexbox/Grid examples.
Updates tests to cover new/modified examples and adjusts exports to named exports in example registries.

Reviewed Changes

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

Show a summary per file

File	Description
www/test/snapshots/navigation.spec.ts.snap	Updates snapshots for navigation to include the new sizes guide and example list changes.
www/src/views/GuideView.tsx	Registers ChartSizing guide and exports allGuides for use in navigation.
www/src/navigation.ts	Sources guides from GuideView’s exported allGuides instead of a hardcoded list.
www/src/locale/zh-CN.ts	Adds localized label for the sizes guide.
www/src/locale/en-US.ts	Adds English label for the sizes guide.
www/src/docs/exampleComponents/index.ts	Switches to named exports for example groups consumed by navigation.
www/src/docs/exampleComponents/TreeMap/index.ts	Converts to named export treeMapExamples.
www/src/docs/exampleComponents/TreeMap/SimpleTreemap.tsx	Reworks to responsive-style sizing (removed ResponsiveContainer).
www/src/docs/exampleComponents/TreeMap/CustomContentTreemap.tsx	Reworks to responsive-style sizing (removed ResponsiveContainer).
www/src/docs/exampleComponents/Tooltip/index.ts	Converts to named export tooltipExamples.
www/src/docs/exampleComponents/Tooltip/CustomContentOfTooltip.tsx	Makes BarChart responsive, exposes animation/tooltip index props, and adjusts margins.
www/src/docs/exampleComponents/RadialBarChart/index.ts	Converts to named export radialBarChartExamples.
www/src/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsx	Makes chart responsive and fixes “unknown” label typo.
www/src/docs/exampleComponents/RadarChart/index.ts	Converts to named export radarChartExamples.
www/src/docs/exampleComponents/RadarChart/SpecifiedDomainRadarChart.tsx	Makes chart responsive, removes ResponsiveContainer.
www/src/docs/exampleComponents/RadarChart/SimpleRadarChart.tsx	Makes chart responsive and sets margins.
www/src/docs/exampleComponents/PieChart/index.ts	Adds Flexbox/Grid examples, removes TwoSimplePieChart, renames display text, and converts to named export.
www/src/docs/exampleComponents/PieChart/TwoSimplePieChart.tsx	Removes outdated example.
www/src/docs/exampleComponents/PieChart/TwoLevelPieChart.tsx	Makes chart responsive and parameterizes animation.
www/src/docs/exampleComponents/PieChart/StraightAnglePieChart.tsx	Makes chart responsive and parameterizes animation.
www/src/docs/exampleComponents/PieChart/PieChartWithPaddingAngle.tsx	Simplifies to a single pie with gap and rounded corners, responsive sizing, and animation flag.
www/src/docs/exampleComponents/PieChart/PieChartWithNeedle.tsx	Adjusts sizing/center and relies on per-slice fill in data; parameterizes animation.
www/src/docs/exampleComponents/PieChart/PieChartWithCustomizedLabel.tsx	Type-safes label renderer and makes chart responsive.
www/src/docs/exampleComponents/PieChart/PieChartInGrid.tsx	Adds new grid-based responsive example.
www/src/docs/exampleComponents/PieChart/PieChartInFlexbox.tsx	Adds new flexbox-based responsive example.
www/src/docs/exampleComponents/Legend/LegendEffectOpacity.tsx	Makes chart responsive and updates margins.
www/src/components/analytics.ts	Updates GA measurement ID.
www/src/components/Shared/TargetBlankLink.tsx	Switches stylesheet import from SCSS to CSS.
www/src/components/GuideView/index.ts	Adjusts Customize to named export.
www/src/components/GuideView/Customize.tsx	Converts to named export; adjusts CustomTooltip import to named export.
www/src/components/GuideView/CustomTooltip.tsx	Switches stylesheet to CSS and converts to named export.
www/src/components/GuideView/ChartSizing.tsx	Adds the new guide page detailing sizing, responsive prop, and ResponsiveContainer usage.
test-vr/tests/www/TreemapApiExamples.spec-vr.tsx	Adds VR tests for SimpleTreemap and CustomContentTreemap.
test-vr/tests/www/TooltipApiExamples.spec-vr.tsx	Adds VR test for CustomContentOfTooltip with animation disabled.
test-vr/tests/www/RadialBarChartApiExamples.spec-vr.tsx	Adds VR test for SimpleRadialBarChart.
test-vr/tests/www/RadarChartApiExamples.spec-vr.tsx	Adds VR tests for Radar examples.
test-vr/tests/www/PieChartApiExamples.spec-vr.tsx	Adds VR tests for Pie examples, often with animations disabled.
test-vr/tests/www/LegendApiExamples.spec-vr.tsx	Adds VR test for LegendEffectOpacity.

_{Tip: Customize your code reviews with copilot-instructions.md.Create the file orlearn how to get started.}

www/src/docs/exampleComponents/Tooltip/CustomContentOfTooltip.tsxShow resolvedHide resolved

www/src/docs/exampleComponents/Legend/LegendEffectOpacity.tsx

		>
		<CartesianGridstrokeDasharray="3 3"/>
		<XAxisdataKey="name"/>
		<YAxiswidth="auto"/>

Copy link

Preview

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

YAxis.width should be a number; 'auto' is not a valid value. Remove the width prop or provide a numeric width.

Suggested change

	<YAxiswidth="auto"/>
	<YAxis/>

Copilot uses AI. Check for mistakes.

www/src/docs/exampleComponents/TreeMap/SimpleTreemap.tsxShow resolvedHide resolved

www/src/docs/exampleComponents/TreeMap/CustomContentTreemap.tsx

Comment on lines +172 to +179

		<Treemap
		style={{width:'100%',maxWidth:'500px',maxHeight:'80vh',aspectRatio:4/3}}
		data={data}
		dataKey="size"
		stroke="#fff"
		fill="#8884d8"
		content={CustomizedContent}
		/>

Copy link

Preview

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Treemap needs explicit sizing or a responsive mode to render. Add responsive to Treemap (if available) or specify width/height or use ResponsiveContainer.

Copilot uses AI. Check for mistakes.

www/src/components/GuideView/ChartSizing.tsx

Comment on lines +136 to +139

		<ResponsiveContainerwidth="100%"maxHeight={400}>
		<LineChartdata={data}>
		<LinedataKey="y"/>
		</LineChart>

Copy link

Preview

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

ResponsiveContainer does not support maxHeight. Use height with a sized parent (as you already set via the wrapper div) instead: height="100%".

Copilot uses AI. Check for mistakes.

test-vr/tests/www/RadialBarChartApiExamples.spec-vr.tsxShow resolvedHide resolved

test-vr/tests/www/RadarChartApiExamples.spec-vr.tsxShow resolvedHide resolved

test-vr/tests/www/LegendApiExamples.spec-vr.tsxShow resolvedHide resolved

www/src/components/GuideView/ChartSizing.tsx Outdated

		constlocale=useLocale();
		return(
		<article>
		<h1>Chart size and layout</h1>

Copy link

Preview

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

[nitpick] Page title is singular ('size') while navigation/localization uses 'sizes'. For consistency with the new nav item, consider 'Chart sizes and layout'.

Suggested change

	<h1>Chartsize and layout</h1>
	<h1>Chartsizes and layout</h1>

Copilot uses AI. Check for mistakes.

Copy link

github-actionsbot commentedOct 5, 2025

Visual Regression tests failed.

Live Report URL:http://recharts.github.io/recharts/vr-report/responsive-cont
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.

Copy link

CollaboratorAuthor

PavelVanecek commentedOct 5, 2025

Hah the grid is wild

PavelVanecek added4 commits

October 5, 2025 23:27

Add tests for responsive prop, remove unreachable code

6c4c79b

Update terminology for chart sizing in documentation and snapshots, a…

e9df45c

…dd space to link

I got sick of invisible links so here is text-decoration back as it s…

243d4e6

…hould be

Comment out failing PieChartInGrid test due to inconsistent results a…

d156c67

…cross browsers

PavelVanecek requested a review fromCopilot

October 5, 2025 14:43

CopilotAI reviewed

Oct 5, 2025

View reviewed changes

Copy link

Contributor

CopilotAI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Pull Request Overview

Copilot reviewed 45 out of 89 changed files in this pull request and generated 14 comments.

_{Tip: Customize your code reviews with copilot-instructions.md.Create the file orlearn how to get started.}

src/chart/RechartsWrapper.tsx

Comment on lines 114 to 117

		};
		constobserver=newResizeObserver(callback);
		observer.observe(node);
		if(observerRef.current!=null){
		observerRef.current.disconnect();
		}
		observerRef.current=observer;

Copy link

Preview

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Disconnecting any previously registered ResizeObserver was removed; this can leak observers and keep observing stale nodes. Before assigning a new observer, disconnect the old one, e.g.: if (observerRef.current) observerRef.current.disconnect();

Copilot uses AI. Check for mistakes.

www/src/docs/exampleComponents/Tooltip/CustomContentOfTooltip.tsxShow resolvedHide resolved

www/src/docs/exampleComponents/Legend/LegendEffectOpacity.tsxShow resolvedHide resolved

www/src/docs/exampleComponents/RadarChart/SimpleRadarChart.tsxShow resolvedHide resolved

www/src/docs/exampleComponents/PieChart/PieChartWithPaddingAngle.tsxShow resolvedHide resolved

www/src/docs/exampleComponents/PieChart/TwoLevelPieChart.tsxShow resolvedHide resolved

www/src/docs/exampleComponents/PieChart/PieChartInGrid.tsxShow resolvedHide resolved

www/src/docs/exampleComponents/PieChart/PieChartInFlexbox.tsxShow resolvedHide resolved

www/src/components/GuideView/ChartSizing.tsxShow resolvedHide resolved

PavelVanecek changed the title~~Make rest of the examples responsive, add page on sizing~~Make rest of the examples responsive, add guide for setting sizes

Oct 5, 2025

PavelVanecek requested a review fromckifer

October 6, 2025 17:02

Labels

None yet

1 participant

Movatterモバイル変換

Uh oh!

Make rest of the examples responsive, add guide for setting sizes#6417

Are you sure you want to change the base?

Make rest of the examples responsive, add guide for setting sizes#6417

Conversation

PavelVanecek commentedOct 5, 2025

Description

Uh oh!

codecovbot commentedOct 5, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Codecov Report

Uh oh!

codecovbot commentedOct 5, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

CopilotAI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

CopilotAIOct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

CopilotAIOct 5, 2025

Choose a reason for hiding this comment

Uh oh!

CopilotAIOct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

CopilotAIOct 5, 2025

Choose a reason for hiding this comment

Uh oh!

github-actionsbot commentedOct 5, 2025

Uh oh!

PavelVanecek commentedOct 5, 2025

Uh oh!

CopilotAI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

CopilotAIOct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codecovbot commentedOct 5, 2025•
edited
Loading

codecovbot commentedOct 5, 2025•
edited
Loading