Transition of donuts charts are awkward

[nick-keller]

Transition of donuts charts are awkward

[junedchhipa]

This commit 1ded7a0 fixes the flickering

[junedchhipa]

Yes, it doesn't look very pretty.
I will try something else for animation of updated pie/donut charts

[JCQuintas]

My animations are even weirder. The shape gets close to an '8' somehow then back to normal. I just disabled animation for donut chart while waiting for a fix.

[junedchhipa]

Right!
I am guessing the '8' might be because of angle getting bigger than 360 when animating.
Will look into it.

[junedchhipa]

Tried an alternative way to animate pie/donut when data changes.

Still, not 100% perfect, but prevents the weird drawings now.

[unknownentity123]

One method I imagined would be to have the existing data slices that are to be replaced, roll up clockwise into the 12 o'clock position just like they appeared when the chart was first drawn except in a mirrored fashion. Then have all the new data slices roll roll out of the 12 o'clock position just like they do when it's first drawn that way any additional slices that might need to be created if extending the data series by one of more won't akwardly be just dumped onto the canvas. Same can be said if you are decreasing the data series....once the slices are rolled up into the 12 o'clock position one or more slices can be disposed of without glitching while the remaining needed slices can then extend back out onto the canvas just like on a fresh chart.

[junedchhipa]

@unknownentity123 Thanks for your input.

I decided not to make it complicated and spent some more time to achieve a natural looking animation.

Finally, after some hours of playing with "startAngle" and "toAngle", I was able to achieve a very smooth transition.
Here is the end result

[junedchhipa]

Here is the codepen example to play with

[nick-keller]

Awesome work here, this is looking perfect.
On the codepen the graph blinks when I click a button, a bit strange.

[junedchhipa]

Yes, I can see a bit of flickering, couldn't find an easy fix for this yet.
I will keep an eye on it though.

[unknownentity123]

Awesome...fantastic solution! Love the animation and it looks a lot more natural that what I was suggesting so a win all the way around!

[unknownentity123]

This morning, I'm working on using the newest release and the animation is perfect...however now any edge between slices that occurs past the 180 degree mark of the pie/donut creates a drop shadow on the previous slice that wasn't present in the previous releases before the fix. The drop shadow may also be present on less that 180 edges but I can't seem to really see it on my examples and might just be due to the angle of the shadow. Before the edges just a flat look and only the whole pie had a 3-D look with the drop shadow.

See my example used on my other post here:
https://codesandbox.io/s/l2porqmrk7

[junedchhipa]

Hi @unknownentity123

The drop shadow was always there, but I changed a default setting in fill.opacity

fill: {
  opacity: 1 // previously, it was 0.8
}

This change has made the shadow darker. If you want to lighten the shadow, you can reduce the opacity of the shadow.
In your example, try 0.05 instead of 0.1

The reason I did the fill.opacity change is to not modify the default color settings given by the user as it may cause inconsistencies with their theme colors.

[unknownentity123]

Gotcha...thanks! It's crazy that 0.2 made that much of a difference in visibility. Although I did remove the stroke between the slices which would break up and hide some of the shadow if left visible and default width.