Victory: Victory Pie doesn't animate onLoad

[NgoKnows]

<VictoryPie animate={ duration: 1000, onLoad: { duration: 1500 } } /> for example, doesn't cause the component to animate on load.

[sto3psl]

I saw the same behaviour with <VictoryLine />. It does not animate onLoad, changing data and everything else seems to animate fine.

Here is a fiddle to try it out: https://jsfiddle.net/gvj3ek19/

Only <VictoryBar /> animates on load.

@NgoKnows I think there is a typo in your animate prop. After the second duration is a : missing, it should be onLoad: { duration: 1500 }.

[sto3psl]

0.18.3 seems to fix the issue for VictoryLine but not for VictoryPie.

[goldbullet]

yes, 0.18.3 seems to have fixed the issue for VictoryLine but not for VictoryPie.

[SusanESmith]

any update on fixing animations for VictoryPie ?

[ac1dr3d]

no animation on pie...
y?

[stephanemombuleau]

+1 for tracking

[delafields]

+1

[jenessawhite]

+1

[sherryxiao1988]

+1

[tommcgurl]

+1

[lgerndt]

+1

[lgerndt]

I worked around the bug by first noticing that it does animate when, after having first rendered a dataset, you pass it new dataset. That got me thinking: on page load, pass it a reduced array of say, just one datum, let it render, then from that point on, pass it the full data set. Like this, just before render:

    let chartDataForRender = Array.from(chartData);
    // this little trick is necessary to make the pie animate on load.  For the very first render, pare down
    // the chartData array to just one element, then, for all future renders, use the fully array
    if (this.state.useDummyData) {
      chartDataForRender = chartData.slice(0, 1);
      setTimeout(() => { this.setState({ useDummyData: false }); }, 100);
    }

[johndturn]

I'm still seeing this bug for VictoryPie as well. @lgerndt 's solution is working for me for the most part, though it's not ideal. I'd just like to check in and see if there's any word on a fix for this?

[shadrech]

Any word on this? @lgerndt 's solution is ok but extremely hacky. Won't get past a code review on the job 😅

[lgerndt]

Unfortunately no. But you can make it animate by first loading a dummy dataset of all zero, then loading the actual dataset after some timeout.

On Nov 6, 2019, at 1:44 PM, Tatenda Chawanzwa [e-mail] wrote:

Any word on this?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/FormidableLabs/victory/issues/531?email_source=notifications&email_token=AANVAQFDILNEGSO75E64CKTQSM3FVA5CNFSM4DEM2HWKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDIC5EA#issuecomment-550514320, or unsubscribe https://github.com/notifications/unsubscribe-auth/AANVAQFHEOC5W4UUXIQFOZ3QSM3FVANCNFSM4DEM2HWA.

Larry Gerndt
650.669.0335
Emerging Truths http://www.emergingtruths.com/

[mattgle]

This is an article that i wrote, I hope it helps you https://medium.com/wolox-driving-innovation/how-to-animate-a-pie-chart-with-victory-in-react-native-db5997b991a5 @NgoKnows