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 (pletely outside of the chart itself) when chart.js finishes the animation of the chart.

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 (pletely outside of the chart itself) when chart.js finishes the animation of the chart.

• javascript
• html
• animation
• chart.js
• vue.js

2 Answers 2

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

There is an onAnimationComplete option you can specify to run stuff once the animation pletes. 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 plete')
    }
});

Fiddle - http://jsfiddle/4vo72rLd/