Animation when changing pie data about nivo HOT 19 CLOSED

It would be a really great addition!

from nivo.

I like pie.

Animation would be cool! 🥇

from nivo.

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).

from nivo.

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...

from nivo.

is there any progress on this?

from nivo.

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

from nivo.

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

from nivo.

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.

from nivo.

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.

from nivo.

pretty plz

from nivo.

I also found this thread :(

from nivo.

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!

from nivo.

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!

from nivo.

Waiting for the release !!

from nivo.

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

from nivo.

@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.

from nivo.

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

from nivo.

@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}`}
            />

from nivo.

@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?

from nivo.