Can you disable the animation of a Charts.js chart?

Asked

Viewed 395 times

1

has to disable an animation of a chart Charts.js?
I’m putting together a chart that updates every 300 milliseconds via ajax, but the animation of the Charts.js chart disrupts the visualization.

the graphic assembly code:

function montaGrafico(report_one, report_two, report_three, report_four, datas) {
var ctx = document.getElementById('myChart2').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    // The data for our dataset
    data: {
        labels: [datas[4], datas[3], datas[2], datas[1], datas[0]],
        datasets: [
            {
                label: "Linha 1",
                backgroundColor: 'rgba(0, 140, 204, 0.5)',
                borderColor: 'rgba(0, 140, 204, 0.6)',
                borderWidth: 2,
                data: [report_one[4], report_one[3], report_one[2], report_one[1], report_one[0]]
            },
            {
                label: "Linha 2",
                backgroundColor: 'rgba(255, 150, 102, 0.5)',
                borderColor: 'rgba(255, 150, 102, 0.6)',
                borderWidth: 2,
                data: [report_two[4], report_two[3], report_two[2], report_two[1], report_two[0]]
            },
            {
                label: "Linha 3",
                backgroundColor: 'rgba(248, 255, 33, 0.5)',
                borderColor: 'rgba(248, 255, 33, 0.6)',
                borderWidth: 2,
                data: [report_three[4], report_three[3], report_three[2], report_three[1], report_three[0]]
            },
            {
                label: "Linha 4",
                backgroundColor: 'rgba(112, 204, 124, 0.5)',
                borderColor: 'rgba(112, 204, 124, 0.6)',
                borderWidth: 2,
                data: [report_four[4], report_four[3], report_four[2], report_four[2], report_four[0]]
            }
        ]
    },
    // Configuration options go here
    options: {}
});

}

javascript jquery chartjs

1 answer

3


To disable animations, pass the following settings in options:

options: {
   animation: false
}

Browser other questions tagged javascript jquery chartjs

You are not signed in. Login or sign up in order to post.