[Chartjs]-How to update ChartJS in a long polling & stop animation stuttering?

by

1👍

✅

I ran into a similar situation and I ended up disabling the animation, which obviously solved the problem, but because it looked a bit less dazzling the customer did not like the solution, in the end I had to utilise a hack.

Not sure if this will work for you, but in my case it did, you do this by using setTimeout to 1 millisecond.

Run the update & then set a timeout for a millisecond & run the update again. If this doesn’t work, try setting arbitrary data (instead of emptying the data) & then updating to the correct dataset a millisecond later.

In my instance:

refreshScope( endscope ) {
    if(this.current_scope == 'today') {
        this.current_scope = `week`; // Opposite (changes data on watcher)
    } else {
        this.current_scope = `today`; // Opposite again.
    }
    setTimeout(() => {
        this.current_scope = `${endscope}`;
    }, 1);
}

There are of course other (better) options you can employ, as outlined by ChartJS’ performance page:

https://www.chartjs.org/docs/3.1.1/general/performance.html

And ultimately disabling animation will make it seem accurate – not stutter, albeit less dazzling, and not require hacks.

Disabling animation:

new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        animation: false
    }
});

Leave a comment