Enable CSS transition for sectors on hover in PieChart with isAnimationActive as true
#4216
Comments
|
Looks like this is a bug as far as I can tell. When animation is not active, the sectors do not re-render on hover. When animation is active, they do. Probably a rendering optimization to be done here. |
Thanks for your inputs @ckifer |
|
https://github.com/recharts/recharts/blob/3.x/src/polar/Pie.tsx#L536 This is probably where the issue is, but the fix isn't clear. I personally wouldn't recommend this as a first issue to take up, but feel free to look into it if you'd like |
## Description This PR is for the issue with `PieChart` that custom animations do not work when `isAnimationActive` is set to true ## Related Issue [Enable CSS transition for sectors on hover in PieChart with isAnimationActive as true](#4216) ## Motivation and Context After digging into the code, I found that the `key` in the `Animate` component causes the problem. The dynamic key triggers the process of remounting the component, which overrides the custom animation. It also adds rendering burden: if a user sets the mouse hover animation, every time the user hovers over one piece of the pie chart, the entire pie chart will re-render. ## How Has This Been Tested? Tested locally ## Screenshots (if appropriate): https://github.com/recharts/recharts/assets/41566276/f9662c73-8985-4c85-9b78-af8d91dc7b2a ## Types of changes - [x] 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 extended an existing story to show my changes
Reproduction link
Steps to reproduce
isAnimationActiveis true, hover any sector, check the fill transition is not appliedisAnimationActiveis false, hover any sector, check the fill transition is appliedWhat is expected?
the fill transition works in both cases
What is actually happening?
the fill transition only works if
isAnimationActiveis falseI posted this in SO as I thought it was not an issue but I got no response so I'm opening this here. Thank you!
The text was updated successfully, but these errors were encountered: