PieChart Slices Animation

[wayz9]

Hey everyone,

Is it possible to animate slices of PieChart to grow or expand? So far I managed to replace activeShape with <Sector> component and adjust outerRadius to be slightly bigger which increases hovered size but it happens instantly. Is there a way to animate it, apply some transitions?

NextJS 14;
recharts ^2.11
react ^18

I am using NextJS but the Chart component itself is client side and it's being imported via dynamic with ssr false.

Code for reference;

<PieChart
  margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
  width={270}
  height={270}
>
  <Pie
    startAngle={90}
    animationDuration={550}
    animationEasing="ease-in-out"
    activeIndex={activeIndex}
    activeShape={(props: any) => (
      <Sector {...props} outerRadius={props.outerRadius + 10} />
    )}
    onMouseEnter={(_, index) => setActiveIndex(index)}
    onMouseLeave={() => setActiveIndex(-1)}
    endAngle={-270}
    dataKey="value"
    data={data}
    cx="50%"
    cy="50%"
    innerRadius={65}
    outerRadius={125}
    blendStroke
    label={CustomLabel}
    labelLine={false}
    className="focus:outline-none"
  />
</PieChart>

[ckifer]

Hi!

Would you be able to get this reproduced in a sandbox? We can go from there - link

[wayz9]

The link you sent returns "Sandbox not found", it's probably private.

I created something on my own here.

[ckifer]

Ah sorry, thanks for the link

[ckifer]

Try this

I used react-smooth for animation (recharts animation library), but you could use any animation library convenient to you that takes a value from one thing to another with animation (react-spring, framer-motion, etc)

[wayz9]

That is actually clever, wow. Thank you for your time and help. ✨

[ckifer]

No problem!