Animate shapes like AreaClosed and Pie

[lednhatkhanh]

Thank for this amazing library, I checked and there's no example to animate AreaClosed and Pie chart without using XYChart. Could you please let me know how can I animate AreaClosed and Pie Chart? Thank you.

[williaster]

Hey @lednhatkhanh thanks for checking out visx. Animation in react requires custom implementation because react wasn't built to handle the fast back-to-back updates (60+ per second). Overall visx tries to not have an opinion on animation because there are many frameworks out there, which is why this functionality is only in xychart which is more of a "high level chart" library, not primitives, where we use the react-spring library which is very performant.

So my best recommendation is to check out the implementation in xychart and mimic that. e.g., AnimatedPath. Another option if you're interested could be migrating those animated primitives to the @visx/react-spring, where we already have AnimatedAxis and grid. Then you could just add @visx/react-spring as a dependency and use them directly. Happy to review a PR if you want to do that. I would note that won't work for the animated pie chart, you can check out the example in the gallery for that https://airbnb.io/visx/pies

[lednhatkhanh]

Thank you! @williaster