Chartist-js: Stacked bar chart animations

[ghost]

Hello everyone,

I'm having trouble creating an animated stacked bar chart.
Im trying to create an animation effect like the one used in the donut chart.
The animation is working but it needs to wait until its underlaying bar is finished.

can anyone tell me if this is possible and if it is how it should be done.

Thanks,
Bart

[bhdzllr]

Hello bartdelange,

I try the same thing (snippet below) as I trying to delay the animation of each part.
Problem is, I don't know how to empty the chart before,
because one part is animated but the other part is still on the display until it gets animated.
Any thoughts how to empty the chart before animating?

Thanks,
Bernhard

.on('draw', function(data) {
    if(data.type === 'bar') {
        if (data.seriesIndex == 0) {
            data.element.animate({
                y2: {
                    begin: 0,
                    dur: 500,
                    from: data.y1,
                    to: data.y2
                }
            }, false);
        }

        if (data.seriesIndex == 1) {
            data.element.animate({
                y2: {
                    begin: 500,
                    dur: 500,
                    from: data.y1,
                    to: data.y2
                }
            }, false);
        }
    }
})

[ghost]

Hi Bernhard,

I've got it working now.
I've managed to simply set the stroke-width to 0 on draw
and in the animation it updates the stroke-width.

.on('draw', function (data) {
    if (data.type === 'bar') {
        data.element.attr({
            style: 'stroke-width: 0px'
        });
        var strokeWidth = 10; 

        if (data.seriesIndex === 0) {
            data.element.animate({
                y2: {
                    begin: 0,
                    dur: 500,
                    from: data.y1,
                    to: data.y2,
                    easing: Chartist.Svg.Easing.easeOutSine,
                },
                'stroke-width': {
                    begin: 0,
                    dur: 1,
                    from: 1,
                    to: strokeWidth,
                    fill: 'freeze',
                }
            }, false);
        }

        if (data.seriesIndex === 1) {
            data.element.animate({
                y2: {
                    begin: 500,
                    dur: 500,
                    from: data.y1,
                    to: data.y2,
                    easing: Chartist.Svg.Easing.easeOutSine,
                },
                'stroke-width': {
                    begin: 500,
                    dur: 1,
                    from: 0,
                    to: strokeWidth,
                    fill: 'freeze',
                }
            }, false);
        }
    }
});

I hope this helps,

Bart

[bhdzllr]

Hello Bart,
thank you, works for me.
Bernhard

[blaues0cke]

Thanks! Updated this to support every amount of bars:

.on('draw', function (data)
{
    if (data.type === 'bar') {
        data.element.attr({
            style: 'stroke-width: 0px'
        });
        var strokeWidth = 10;

        for (var s = 0; s < data.series.length; ++s) {
            if (data.seriesIndex === s) {
                data.element.animate({
                    y2:             {
                        begin:  s * 500,
                        dur:    500,
                        from:   data.y1,
                        to:     data.y2,
                        easing: Chartist.Svg.Easing.easeOutSine
                    },
                    'stroke-width': {
                        begin: s * 500,
                        dur:   1,
                        from:  0,
                        to:    strokeWidth,
                        fill:  'freeze'
                    }
                }, false);
            }
        }
    }
});

[biju001]

here is my one not working.. what was wrong in my code. would you please check

    var data = {
  labels: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    series: [
    [5, 4, 3, 7, 5, 10, 3],
    [3, 2, 9, 5, 4, 6, 4],
    [4, 5, 6, 4, 8, 6, 2]
  ]
};

var options = {
  seriesBarDistance: 15,
  height: 200
};

        chart.on('draw', function (data)
{
    if (data.type === 'bar') {
        data.element.attr({
            style: 'stroke-width: 0px'
        });
        var strokeWidth = 10;

        for (var s = 0; s < data.series.length; ++s) {
            if (data.seriesIndex === s) {
                data.element.animate({
                    y2:             {
                        begin:  s * 500,
                        dur:    500,
                        from:   data.y1,
                        to:     data.y2,
                        easing: Chartist.Svg.Easing.easeOutSine
                    },
                    'stroke-width': {
                        begin: s * 500,
                        dur:   1,
                        from:  0,
                        to:    strokeWidth,
                        fill:  'freeze'
                    }
                }, false);
            }
        }
    }
});

var responsiveOptions = [
  ['screen and (min-width: 641px) and (max-width: 1024px)', {
    seriesBarDistance: 10,
    axisX: {
      labelInterpolationFnc: function (value) {
        return value;
      }
    }
  }],
  ['screen and (max-width: 640px)', {
    seriesBarDistance: 5,
    axisX: {
      labelInterpolationFnc: function (value) {
        return value[0];
      }
    }
  }]
];

new Chartist.Bar('.ct-chart', data, options, responsiveOptions);

[blaues0cke]

@biju001 Have you checked your error console?

[biju001]

@blaues0cke ... it show error
Uncaught ReferenceError: chart is not defined and this linechart.on('draw', function (data)

[blaues0cke]

@biju001 Modify your code to store the chartist-instance you create:

var chart = new Chartist.Bar('.ct-chart', data, options, responsiveOptions);

And then move the chart.on('draw', function (data)-code after the initialization.

(Further communication should be done using stackoverflow.com since everyone here is noticed about this comments that have nothing to do with the actual issue)

[biju001]

@blaues0cke .. wow cool.. thank you so much. it is working :)