score:0

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
    }
});

Related Query

More Query from same tag