Animation when changing pie data

[Kerumen]

Great lib!

I was wondering why there were no animation when pie datas are updated?
It works for the line component for example and its nice.

[plouc]

It's a little bit more complicated for Pie component, as you have to animate the angle/radius instead of the shape, whereas you can just animate the shape for the line component, I'll probably add support for this, but it requires a little bit of work (and for optimal transitions, you should search closest previous angle).

[Kerumen]

It would be a really great addition!

[namesphill]

is there any progress on this?

[BenJenkinson]

Also, the ResponsivePie example code (code tab, not the adjustable props) and the CommonPieProps TypeScript props both include the MotionProps props that imply the Pie does animate; except it doesn't.

[antonstjernquist]

I like pie.

Animation would be cool! 🥇

[Roeefl]

We demand animated pie charts! OR!
OR!
I'm just kidding I do not demand anything but it would be amazing to have it able to animate when it shows up.

Thank you for this great library it is just superb

[omarathon]

pretty plz

[nemethricsi]

I also found this thread :(

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[plouc]

This has been implemented and should be available in the upcoming release (no ETA yet), if you want to play with it you can already have a look at the codesandbox, just realized this issue is 3 years old, wow...

[nemethricsi]

This has been implemented and should be available in the upcoming release (no ETA yet), if you want to play with it you can already have a look at the codesandbox, just realized this issue is 3 years old, wow...

amazing news thanks!

[raman-natarajan]

Any word on a possible release date for the new version with animation?

[marcelojrfarias]

Waiting for the release !!

[MShodmonov]

Waiting in 2022 too. However, thanks for the great job you have done so far !!!

[rtman]

@plouc is this not available in the current release? The docs indicate that it's on by default and I see it animating in the docs, but when I setup a pie chart in my repo I don't have any animations.

[plouc]

@rtman, it's been released for some time now, and you can see it on https://nivo.rocks/pie/.

[rtman]

@plouc Yea that is where I was seeing it animate correctly, maybe it's something to do with my setup. I'll try and create a codesandbox to repro.

Below is how I'm using it right now.

            <ResponsivePie
              colors={{ datum: 'data.color' }}
              data={mockPieChartData}
              enableArcLabels={false}
              enableArcLinkLabels={false}
              valueFormat={(value) => `$${value}`}
            />

[rtman]

@plouc Here's the codesandbox, I was able to get on hover animations working but not the initial mount one. Can you take a look?

[yumcoding]

have same issue.
Hovering animations are working but the initial mount animation isn't.

Below is my setup.

        <ResponsivePie
          data={data}
          margin={{ top: 8, right: 8, bottom: 8, left: 8 }}
          padAngle={0}
          innerRadius={0.6}
          cornerRadius={0}
          enableArcLabels={false}
          enableArcLinkLabels={false}
          activeOuterRadiusOffset={8}
          isInteractive={true}
          colors={["#5A7CF8", "#70BECD", "#F6DD66", "#E2814A", "#CE5E41"]}
          tooltip={({ datum: { id, value, color } }) => <PieCustomTooltip value={value} color={color} />}
          motionConfig={{
            mass: 1,
            tension: 170,
            friction: 26,
            clamp: false,
            precision: 0.01,
            velocity: 0,
          }}
          transitionMode="outerRadius"
          onMouseEnter={(props) => {
            console.log(props);
          }}
        />

I got this warning on my console.

 Failed prop type: Invalid prop `motionConfig` of type `object` supplied to `Zt`, expected `string`.

I also tried the line chart with the default motionConfig.
The line chart animation didn't work either and got the same warning.