animate pie chart

[lim1017]

Ive been trying for hours to animate my pie graph. Ive managed to get bar/line animated by searching the internets but the PIE has been tough..

The chart will render but it does not animate

I've referenced http://jsfiddle.net/nwa9d167/

and Animating a donut http://gionkunz.github.io/chartist-js/examples.html#animating-a-donut-with-svganimate

my code is below, I've basically copy/pasted the examples into my chart.

Im using React btw

Thanks

`<ChartistGraph data={createPie(state.totalExpenses)} type="Pie"

                listener={{
                  draw: function (data) {

                    console.log('data is: ', data);
                     
                    if (data.type === 'slice') {
                  
                      var pathLength = data.element._node.getTotalLength();
                      console.log(pathLength)
// Set a dasharray that matches the path length as prerequisite to animate dashoffset
data.element.attr({
  'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
});

// Create animation definition while also assigning an ID to the animation for later sync usage
var animationDefinition = {
  'stroke-dashoffset': {
    id: 'anim' + data.index,
    dur: 1000,
    from: -pathLength + 'px',
    to:  '0px',
    // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
    fill: 'freeze'
  }
};

// If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
if(data.index !== 0) {
  animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
}

// We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
data.element.attr({
  'stroke-dashoffset': -pathLength + 'px'
});

// We can't use guided mode as the animations need to rely on setting begin manually
// See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
data.element.animate(animationDefinition, false);

} } } } /> } legend={ <div className="legend"> {createLegend({ names: nameList(state.totalExpenses), types: ["info", "danger", "warning", "success"] })} } />`

[scote]

Any workaround for pie chart animation?

[wujekbogdan]

The animation technique that's provided in docs won't work with regular pie charts (donut: false) because the shapes are not drawn using stroke - they use fill. if there are no strokes then we can't animate them.

A workaround is to do:

donut: true,
donutWidth: '100%'

Thanks to this, the chart is still rendered as a donut, but it looks like a pie chart.