Victory: VictoryPie doesn't animate and theme doesn't change if animate is set

[stephanemombuleau]

Hi! First of all, awesome work.

I have an issue with VictoryPie not animating. Nothing fancy going on in the code except:

<VictoryPie animate={{ duration: 1000, onLoad: { duration: 1500 }, delay: 2000 }} data={data} theme={VictoryTheme.material} />

The pie has no animation, and the theme isn't applying.

If I remove animate the theme does apply...

Any idea?

See fiddle: https://jsfiddle.net/3gLazk66/

[boygirl]

@stephanemombuleau thanks for the reproduction. I'll get the issues with themes fixed for next week.

[stephanemombuleau]

@boygirl awesome :) Will the fixes impact animations as well?

[stephanemombuleau]

After further investigation, it seems that the theme is not applied because VictoryPie doesn't have a role set.

Should add in victory-pie.js:
static role = "pie";

As for the animation... it seems like the Pie is not ready for transitions.

UPDATE: this animates the pie. It's not perfect but it does the job in the meantime. I don't know why I have to set it to at least -1200 to have a complete animation though, so if you have any input on that...

<VictoryPie animate={{
                    duration: 2000,
                    onLoad: {
                        duration: 2500,
                        before: () => ({_y: -1200, label: " "}),
                        after: (datum) => ({_y: datum._y})
                    }
                }} data={data} />

[lgerndt]

@stephanemombuleau I too was getting no animation, so I tried your code above, what I see now is that it sorta tries to animate but it all happens in a split second, so something is wrong. Any further learnings on this?

[stephanemombuleau]

@lgerndt None at all. I think the numbers have to relate in some way to your data... It ended up not working in most cases (I have a dashboard with multiple charts) so I turned to react-plotly. It offers more features, better performances and everything works well. It kinda is easier to plug-in as well. It uses the famous plotly.js library, and this doc has everything you need to make it work :)

[mattgle]

Claps if it helps :)
https://medium.com/wolox-driving-innovation/how-to-animate-a-pie-chart-with-victory-in-react-native-db5997b991a5