Chartjs-Chartjs zoom plugin timeout

by

0👍

✅

Finally found a solution, need to use the variable that contains your Chart.
First set your wheel to enabled ‘false’.

@ViewChild('chart') canvas: ElementRef;
const ctx = this.canvas.nativeElement;
this.chart = new Chart(ctx,{
...
zoom: {
    zoom: {
         wheel: {
             enabled: false,
         },
         pinch: {
             enabled: true
         },
         mode: 'x',
     }
   }
})

Then create a mouseenter and mouseleave on your canvas div.

<div (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
  <canvas #chart></canvas>
</div>

To finish use two timeout, one so the user won’t be able to scroll into the canvas before 1s, and another one so the user can out and in with 1s delay and still be able to scroll.

zoomEnterTimeout: any
zoomLeaveTimeout: any

mouseEnter() {
    clearTimeout(this.zoomLeaveTimeout)
    this.zoomEnterTimeout = setTimeout(() => {
        this.infrastructureChart.options.plugins.zoom.zoom.wheel.enabled = true
        this.infrastructureChart.update()
    }, 1000)
}

mouseLeave() {
    clearTimeout(this.zoomEnterTimeout)
    this.zoomLeaveTimeout = setTimeout(() => {
        this.infrastructureChart.options.plugins.zoom.zoom.wheel.enabled = false
        this.infrastructureChart.update()
    }, 1000)
}

Leave a comment