create callback onAnimationStop Vue-Chartjs

Question

What I try to do is to create an callback on the onAnimationComplete option to set percentage in the bar chart. So how does that look:

options: {
responsive: false,
maintainAspectRatio: false,
legend: { display: false },
scaleShowVerticalLines: false,
scales: {
    yAxes: [{
        display: false,
            ticks: {
            display: false
            }
    }],
    xAxes: [{
        barPercentage: .5
    }]
},
onAnimationComplete: function(){
    console.log('test');
},

}

But this property is not getting picked up is there a simple way to create this callback or to simply show the percentage of the bar inside the bar like this: FIDDLE

I'll hope somebody could help me out on this.

Environment

vue.js version: "vue": "^2.1.10", vue-chart.js version: "vue-chartjs": "^3.0.0", npm version: 3.1010

Answer 1

This is because, you are using the incorrect animation callback function/method. onAnimationComplete method is deprecated.

You should use the following instead :

options: {
      animation: {
         onComplete: function() {
            console.log('test');
         }
      },
      ...