Bug reportNov 10, 2026· 0:33· 9 views
recharts 3.10.1: PieChart LabelList vanishes on every unrelated parent re-render (animationInput instability)
0:33 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
mediumPie animation input identity in recharts 3.10.1. A new object or array reference on each parent render appears to restart the Pie animation, and LabelList is hidden while the animation runs. The React.memo plus stable data ref workaround avoids it. Compare animation inputs by value instead of by reference.
os: macOSdpr: 1locale: en-USbrowser: Chromium 151.0.7922.34library: recharts 3.10.1timezone: Europe/Berlinviewport: 1280x720
Repro steps
- 1.Render a PieChart with a LabelList inside a parent component that holds unrelated state. The left panel is labeled 'Bug: Pie inside parent with unrelated state'.
- 2.Confirm that all four labels (React, Vue, Angular, Svelte) are visible on the pie.
- 3.Click the 'Re-render parent' button. This changes only the parent's unrelated state.
- 4.Observe the pie. The slices stay but all labels disappear until the Pie animation ends.
- 5.Click 'Re-render parent' again. The labels disappear again.
Expected
An unrelated parent re-render should not restart the Pie animation or hide the LabelList. All four labels should stay visible. The memoized control chart on the right shows this behavior.
Actual
Each click on 'Re-render parent' restarts the left Pie animation. The left LabelList renders 0 labels for about 1.9 s and then reappears. The bug reproduced on both clicks, at 11.5s and 23.7s.
Evidence
consolePre-click baseline: 'pre-rerender check: bug-panel labels=4 ok-panel labels=4'.
visualBaseline: both pies show the labels React, Vue, Angular and Svelte.
consoleAfter the first click, the console logged that the parent re-rendered, the left PieChart labels are blank (animation restarted), and the right labels are unaffected.
consoleLabel count after the re-render: bug-panel=0, ok-panel=4.
visualThe left pie slices render with no labels. A red status message says the left labels are blank for about 1.9 s.
visualControl: the right panel (React.memo + stable data ref) keeps all four labels during the same re-render.
visualThe left labels are visible again and the status reads 'Labels reappeared after animation.'
console'labels reappeared: bug-panel=4 (animation ended)'. This log is about 5 s later than the frame at 15.0s, which already shows the labels. The log timing may be delayed.
consoleSecond click: 'second re-render: labels blank again on left pie'.
visualThe left pie has no labels again. The right control pie still shows all four labels.
visualThe left labels are restored after the animation and stay visible through 31.0s.
Issue markdown (copy-paste ready)
## Summary In recharts 3.10.1, a PieChart LabelList disappears for about 1.9 s every time the parent component re-renders for an unrelated reason. The Pie animation restarts, and labels are hidden until it ends. A control chart wrapped in `React.memo` with a stable `data` ref is not affected. ## Environment - recharts 3.10.1 - Chromium 151.0.7922.34, macOS - Viewport 1280x720, DPR 1 ## Steps to reproduce 1. Render a PieChart with a LabelList inside a parent component that has unrelated state (0:01). 2. Confirm that the labels React, Vue, Angular and Svelte are visible (0:01). 3. Click **Re-render parent** (0:11.5). 4. Observe that the left pie labels disappear (0:13). 5. Click **Re-render parent** again. The labels disappear again (0:23.7). ## Expected An unrelated parent re-render does not restart the Pie animation. All labels stay visible. ## Actual The left LabelList renders 0 labels after each re-render and returns only after the animation finishes. ## Evidence - 0:01 console: `pre-rerender check: bug-panel labels=4 ok-panel labels=4` - 0:11.7 console: parent re-rendered, left PieChart labels blank (animation restarted), right labels unaffected - 0:12.0 console: `bug-panel=0`, `ok-panel=4` - 0:13 visual: left pie has no labels. Right control pie keeps all four labels. - 0:15 visual: left labels are back and the status reads 'Labels reappeared after animation.' - 0:20.1 console: `labels reappeared: bug-panel=4 (animation ended)`. This is later than the 0:15 frame, so the log may be delayed. - 0:23.8 console: `second re-render: labels blank again on left pie` - 0:25 visual: left labels gone again, right control unaffected. They are restored by 0:27. ## Control The right panel uses `React.memo` and a stable `data` reference. It kept all four labels through both re-renders (0:13, 0:25). ## Suggested area The identity of the Pie animation input. A new reference on each parent render appears to restart the animation, and LabelList is hidden while the animation runs. Comparing animation inputs by value may fix it. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →