CODEWITHSUNDEEP
javascripthtmlanimationchart.jsvue.js
vitr
vitr

Reputation: 7134

chart.js on animation end callback

Does the library chart.js support any sort of callbacks on specific events? I'm mostly interested in 'on animation end' event, but would be nice to know any other events if they're supported.
If this is not an option, do you know any workarounds? I'm using jQuery and vue.js and I just need to show some additional text on the page (completely outside of the chart itself) when chart.js finishes the animation of the chart.

Upvotes: 2

Views: 22960

Answers (2)

Shiva
Shiva

Reputation: 12514

For Chart.Js 2.6.0

options: {
    cutoutPercentage: 90,
    animation: {
        duration: 2000,
        onProgress: function(animation) {
            $progress.attr({
                value: animation.animationObject.currentStep / animation.animationObject.numSteps,
            });
        },
        onComplete: function(animation) {
            alert('onAnimationComplete')
        }
    }
},

See this codepen https://codepen.io/shivabhusal/pen/XaZQaW

Upvotes: 8

potatopeelings
potatopeelings

Reputation: 41065

There is an onAnimationComplete option you can specify to run stuff once the animation completes. See this section of the documentation.

Example

var ctx = document.getElementById("chart").getContext("2d");
var myLine1 = new Chart(ctx).Line(lineChartData1, {
    onAnimationComplete: function() {
        alert('animation complete')
    }
});

Fiddle - http://jsfiddle.net/4vo72rLd/

Upvotes: 3

Related Questions