Drag animation is very slow

[kmlbgn]

I'm using Chart.js v2.9.3, with thz zoom plugin,

my drag option is set as is :

drag: true,
drag: {
         backgroundColor: 'rgba(45,170,225,0.05)',
         animationDuration: 1
},

When dragging, it displays the selection correctly but the rectangle color rendering is slow and laggy
I tried with fewer data (50/200) but it didn't improve.
AnimationDuration doesn't seem to make any change either.
When using lots of data, defaut animations of the chart.js behave normally so i'm not sure which one is lagging when I call a drag-zoom.

Any tips on where to look out to improve that?

[jledentu]

animationDuration is the duration of the animation after the mouseup event (when the zoom is applied). Since you talking about drag, it's not related.

I guess that calling chart.update on each mousemove event has performance impacts. But I don't know any way to draw in the chart.js canvas without triggering an update. @benmccann Any idea?

[kmlbgn]

It's definitely the update() call on each event. I have 4 series plotted, especially one with 2k data on average so it's making it slow for sure.
I tried to use the downsample plugin, but it didn't really work as I intended (ie. downsample data when unzoomed + dynamic downsampling when zooming to keep nice plot precision)
I don't think there would be an other way.

[benmccann]

I've spent most of my time working on making Chart.js 3 a lot faster. Hopefully that will help in making each update faster. I'm not sure if it will be enough or not. I think the only other thing we could do is try to have update called less often

[etimberg]

This is likely resolved in Chart.js v3. We've done a number of things to improve performance https://www.chartjs.org/docs/latest/general/performance.html