amCharts: Pie chart animation not working

Question

I am using more than one pie chart from amCharts on a single page, when the page is loading the animation is not working, and I want it to work. Below is my code which is used to render chart.

var Piechart132 = AmCharts.makeChart('div132', {
    labelsEnabled: false,
    autoMargins: false,
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
    marginRight: 0,
    pullOutRadius: 0,
    type: 'pie',
    theme: 'dark',
    dataProvider: [
        { country: 'Banking', litres: 300000000 },
        { country: 'Carpenter', litres: 349500000000 },
        { country: 'Doctor', litres: 433650000000 },
        { country: 'Gas', litres: 108326000000 },
        { country: 'Mechanic', litres: 366450000000 }
    ],
    outlineThickness: 1,
    outlineAlpha: 1,
    legend: { enabled: true, valueText : '' },
    outlineColor: undefined,
    titles: [{ text: 'Industry wise Exposure' }],
    valueField: 'litres',
    titleField: 'country',
    balloon: { fixedPosition: true }
});

One more than I want to mention that same code when I execute on Fiddle, it is working fine, it might be possible that there is any other conflict but I can't find it anyway. I've even tried to insert startDuration and set its value to20` so that at least I can see what the problem is but still nothing.

xorspark xorspark · Accepted Answer · 2017-07-13T21:14:05

The pie charts definitely do animate when multiple charts are on the same page, however they might all bog down the browser if they're all initialized at once, leading to a choppy experience where the animation runs too quickly or are so choppy that they appear to not work. You may want to consider a lazy-loading technique in which you use each chart's init event to initialize the next chart after a delay, or the lazy load techniques described in the AmCharts knowledge base links below:

https://www.amcharts.com/kbase/lazy-loading-120-charts-page/

https://www.amcharts.com/kbase/make-the-charts-lazy-initialize-only-when-they-scroll-into-view/

amCharts: Pie chart animation not working

1 Answers