Chartjs - onAnimationComplete fires before the animation actually completes

Question

My problem is that the event onAnimationComplete fires before the chart actually finished drawing.

I am use ASP.NET MVC.

This is my code:

HTML:

<canvas id="scanedTodayChart" width="100" height="100"></canvas>

JS:

var scanedTodayChartCtx = document.getElementById("scanedTodayChart").getContext("2d");
var scanedTodayChart = new Chart(scanedTodayChartCtx, {
    type: 'pie',

    data: {
        labels: [
            "Red",
            "White",
        ],
        datasets: [
        {
            data: [10, 100],
            backgroundColor: [
                "#DA1A32",
                "#F0FFFF"
            ],
            borderWidth: false,
            borderColor: false
        }]
    },
    options: {
        cutoutPercentage: 90,
    },
    borderColor: '#DA1A32',
    fullWidth: true,
    onAnimationComplete: new function () {
        alert('onAnimationComplete')
    }
});

Answer 1

I think you did not define an animation. Try this example found at Chart.js documentation.

var scanedTodayChart = new Chart(scanedTodayChartCtx, {
    type: 'pie',

    data: {
        labels: [
            "Red",
            "White",
        ],
        datasets: [
        {
            data: [10, 100],
            backgroundColor: [
                "#DA1A32",
                "#F0FFFF"
            ],
            borderWidth: false,
            borderColor: false
        }]
    },
    options: {
        cutoutPercentage: 90,
        animation: {
            duration: 2000,
            onProgress: function(animation) {
                $progress.attr({
                    value: animation.animationObject.currentStep / animation.animationObject.numSteps,
                });
            },
            onComplete: function(animation) {
                alert('onAnimationComplete')
            }
        }
    },
    borderColor: '#DA1A32',
    fullWidth: true,
});