[Chartjs]-Chartjs animate x-axis displaying data incorrectly in mac device

by

3👍

✅

Please change setTransform to transform.
Try the following code

var canvas = document.getElementById('chart_canvas');
var ctx = canvas.getContext('2d');

// Generate random data to plot
var DATA_POINT_NUM = 10;
var data = {
    labels: [],
    datasets: [
        {
            data: [],
        },
    ]
}
for (var i=0; i<DATA_POINT_NUM; i++) {
    data.datasets[0].data.push(Math.random()*10);
    data.labels.push(String.fromCharCode(65+i));
}

var oldDraw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function(animationFraction) {
    var animationConfig = this.chart.options.animation;
    if (animationConfig.xAxis === true) {
        var ctx = this.chart.chart.ctx;
        var hShift = (1-animationFraction)*ctx.canvas.width;
        ctx.save();
        ctx.transform(1, 0, 0, 1, hShift,0);
        if (animationConfig.yAxis === true) {
            oldDraw.call(this, animationFraction);
        } else {
            oldDraw.call(this, 1);
        }
        ctx.restore();
    } else if (animationConfig.yAxis === true) {
        oldDraw.call(this, animationFraction);
    } else {
        oldDraw.call(this, 1);
    }
}


var lineChart = new Chart(ctx, {
type: 'line',
data: data,
options: { 
animation: { 
duration: 5000,
xAxis: true,
yAxis: true,
}
}
});

Leave a comment