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 our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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
isAnimationActive
is true, hover any sector, check the fill transition is not appliedisAnimationActive
is 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
isAnimationActive
is 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: