fix: PieChart double padding gap when a data item has value 0 by Copilot · Pull Request #7113 · recharts/recharts

Copilot · 2026-03-08T08:33:17Z

Description

Fixes the double-padding bug in Pie charts where a zero-value data item combined with a non-zero paddingAngle causes a visibly larger gap between the adjacent non-zero sectors.

Root cause: computePieSectors was storing paddingAngle: 5 on zero-value sectors (same as non-zero ones). The SectorsWithAnimation rendering code reconstructs sector positions from scratch using each sector's stored paddingAngle as a cursor offset. Since a zero-value sector had paddingAngle: 5, the cursor advanced by 5° for the invisible sector, and then the next visible sector added another 5°, producing a 10° double gap instead of the expected 5°.

Fix: Zero-value sectors now store paddingAngle: 0 in computePieSectors, so the animation code does not advance the cursor for them.

Changes:

src/polar/Pie.tsx — set paddingAngle: 0 for zero-value sectors in computePieSectors
test/state/selectors/pieSelectors.spec.tsx — unit test verifying zero-value sectors have paddingAngle: 0
test-vr/tests/PieChart.spec-vr.tsx — VR test with data containing a value: 0 entry and paddingAngle={5}
Updated Chromium baseline snapshot showing equal gaps between all visible sectors

Related Issue

Double padding on PieChartWithPaddingAngle when value is 0.

Motivation and Context

When paddingAngle is set and a data item has value: 0, the gap between the two non-zero sectors surrounding the zero-value sector appears twice as wide as all other gaps. This is because the animation rendering code uses the stored paddingAngle field on each sector to re-derive positions, and a zero-value sector was incorrectly storing a non-zero paddingAngle, consuming extra space even though the sector itself has zero width.

How Has This Been Tested?

Unit test in test/state/selectors/pieSelectors.spec.tsx directly asserts paddingAngle === 0 for zero-value sectors and paddingAngle === 5 for non-zero sectors
Playwright VR test run locally with --update-snapshots to regenerate the baseline; updated snapshot shows all three visible segments separated by equal 5° gaps
All 94 pie-related unit tests pass

Screenshots (if appropriate):

Three segments (400/300/200) with equal spacing — the gap where the zero-value segment sits is now the same width as all other gaps.

Types of changes

Bug fix (non-breaking change which fixes an issue)

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

Original prompt

This section details on the original issue you should resolve

<issue_title>Double padding on PieChartWithPaddingAngle when value is 0</issue_title>
<issue_description>## Do you want to request a feature or report a bug?
Bug

What is the current behavior?

Currently recharts still adds a padding to sector with 0 value, which causes a double padding/spacing.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

https://jsfiddle.net/gm9rf6t2/

What is the expected behavior?

The padding/spacing between all sector should be the same.

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

<= v.1.50
</issue_description>

<agent_instructions>Add a VR test for this. How to reproduce: have a data array where at least one item has value 0. Add non-zero paddingAngle prop to Pie.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

Fixes Double padding on PieChartWithPaddingAngle when value is 0 #1687

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: PavelVanecek <1100170+PavelVanecek@users.noreply.github.com>

PavelVanecek

Perfect, the test reproduces this well. Now please investigate the problem and fix it

Co-authored-by: PavelVanecek <1100170+PavelVanecek@users.noreply.github.com>

Copilot · 2026-03-08T11:21:36Z

Perfect, the test reproduces this well. Now please investigate the problem and fix it

The bug is in SectorsWithAnimation — it reconstructs sector positions from scratch using entry.paddingAngle as the cursor offset. Since zero-value sectors had paddingAngle: 5 stored on them (same as non-zero sectors), the cursor advanced 5° unnecessarily for the invisible sector, and then the next visible sector added another 5°, resulting in a 10° double gap.

Fix (commit 7ede13d): set paddingAngle: 0 for zero-value sectors in computePieSectors. A unit test verifies the property, and the VR snapshot is updated to show equal gaps.

codecov · 2026-03-08T13:21:54Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.61%. Comparing base (cd13b81) to head (d1fba6e).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7113   +/-   ##
=======================================
  Coverage   89.61%   89.61%           
=======================================
  Files         534      534           
  Lines       40294    40294           
  Branches     5490     5491    +1     
=======================================
  Hits        36109    36109           
  Misses       4177     4177           
  Partials        8        8

☔ 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 · 2026-03-08T13:22:45Z

Bundle Report

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

Detailed changes

Bundle name	Size	Change
recharts/bundle-cjs	1.29MB	16 bytes (0.0%) ⬆️
recharts/bundle-es6	1.12MB	16 bytes (0.0%) ⬆️
recharts/bundle-umd	545.8kB	8 bytes (0.0%) ⬆️
recharts/bundle-treeshaking-polar	443.07kB	16 bytes (0.0%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`Recharts.js`	8 bytes	545.8kB	0.0%

view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`polar/Pie.js`	16 bytes	28.25kB	0.06%

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

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	16 bytes	443.07kB	0.0%

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`polar/Pie.js`	16 bytes	26.43kB	0.06%

github-actions · 2026-03-08T13:54:47Z

Staging Deployment Details

Website: https://recharts.github.io/recharts/pr-7113/www/
Test Report: https://recharts.github.io/recharts/pr-7113/vr-tests/

These deployments will remain available for 30 days.

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

Initial plan

d04614a

Copilot AI assigned Copilot and PavelVanecek Mar 8, 2026

Copilot started work on behalf of PavelVanecek March 8, 2026 08:33 View session

test: add VR test for PieChart with paddingAngle and zero value

48c5d7f

Co-authored-by: PavelVanecek <1100170+PavelVanecek@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Fix double padding on PieChartWithPaddingAngle when value is 0~~ test: Add VR test for PieChart paddingAngle with zero-value data item Mar 8, 2026

Copilot finished work on behalf of PavelVanecek March 8, 2026 09:13

PavelVanecek requested changes Mar 8, 2026

View reviewed changes

Copilot started work on behalf of PavelVanecek March 8, 2026 10:37 View session

Copilot AI and others added 2 commits March 8, 2026 11:00

fix: zero-value sectors should not consume paddingAngle

fcd81eb

Co-authored-by: PavelVanecek <1100170+PavelVanecek@users.noreply.github.com>

fix: zero-value sectors should not consume paddingAngle

7ede13d

Co-authored-by: PavelVanecek <1100170+PavelVanecek@users.noreply.github.com>

Copilot AI changed the title ~~test: Add VR test for PieChart paddingAngle with zero-value data item~~ fix: PieChart double padding gap when a data item has value 0 Mar 8, 2026

Copilot finished work on behalf of PavelVanecek March 8, 2026 11:33

npm run test-vr:update -- --grep=paddingAngle

d1fba6e

PavelVanecek approved these changes Mar 8, 2026

View reviewed changes

PavelVanecek marked this pull request as ready for review March 9, 2026 00:50

PavelVanecek approved these changes Mar 9, 2026

View reviewed changes

ckifer approved these changes Mar 9, 2026

View reviewed changes

PavelVanecek merged commit 4ad1097 into main Mar 9, 2026
48 checks passed

PavelVanecek deleted the copilot/fix-double-padding-pie-chart branch March 9, 2026 07:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: PieChart double padding gap when a data item has value 0#7113

fix: PieChart double padding gap when a data item has value 0#7113
PavelVanecek merged 5 commits intomainfrom
copilot/fix-double-padding-pie-chart

Copilot AI commented Mar 8, 2026 •

edited

Loading

Uh oh!

PavelVanecek left a comment

Uh oh!

Copilot AI commented Mar 8, 2026

Uh oh!

codecov bot commented Mar 8, 2026 •

edited

Loading

Uh oh!

codecov bot commented Mar 8, 2026 •

edited

Loading

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

github-actions bot commented Mar 8, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

Copilot AI commented Mar 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

What is the expected behavior?

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

Comments on the Issue (you are @copilot in this section)

Uh oh!

PavelVanecek left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Mar 8, 2026

Uh oh!

codecov bot commented Mar 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

codecov bot commented Mar 8, 2026 • edited Loading 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:

Assets Changed:

Uh oh!

github-actions bot commented Mar 8, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Mar 8, 2026 •

edited

Loading

codecov bot commented Mar 8, 2026 •

edited

Loading

codecov bot commented Mar 8, 2026 •

edited

Loading