Chartjs-Chart.js onAnimationProgress progress percentage

0👍

The onAnimationProgress has 2 parameters easeDecimal and stepDecimal that you can use

var myLineChart = new Chart(ctx).Line(data, {
    onAnimationProgress: function (easeDecimal, stepDecimal) {
        // stepDecimal proceeds uniformly from 0 to 1
        // easeDecimal proceeds depending on the easing function from 0 to 1
        console.log(stepDecimal)
    }
});

For instance, to change the fillColor – here I just adjust the transparency

var myLineChart = new Chart(ctx).Line(data, {
    animationSteps: 200,
    onAnimationProgress: function (easeDecimal, stepDecimal) {
        this.datasets[0].fillColor = "rgba(120,120,120," + stepDecimal + ")";
    }
});

Leave a comment