on-load animation for nivo pie chart with react js

1.5k views Asked by At

Does the Nivo charts library allow on-load animations for pie charts? I have only been able to get on-load animations for bar charts, but not for pie charts.

Nivo has a transition mode property which gives animation when a chart node is clicked. I need the animation to show on component load. Is there a workaround for this or has anyone managed to get this feature to work before? My pie chart is a react js storybook component.

1

There are 1 answers

0
Tim Philip On

This seems to be a difficult problem to solve. Nivo has an outstanding issue out where they made some progress, but based on the final postings the initial draw still has issues. I was able to force an initial render with a little help from window.setTimeout() but the animation ends up warping the circle, I'm guessing that is why it doesn't work by default.

I tried Victory.js and it also has the exact same issue. You can use this technique in React.js to force the initial draw.

My solution was to move to react-chartjs-2, which worked right out of the box.
https://react-chartjs-2.js.org/components/doughnut/