ApexCharts in Angular: 'Unable to preventDefault inside passive event listener invocation'...

I'm using ApexCharts in an Angular application, specifically inside a Metronic KeenThemes dashboard widget.

I've enabled zoom with the mouse wheel using the following chart options:

chart: {
zoom: {
enabled: true,
type: 'xy'
}
}


The zoom works correctly, but whenever I scroll over the chart area, I get the following warning in the browser console:

Unable to preventDefault inside passive event listener invocation.

This warning comes from apexcharts.esm.js and seems to be triggered when zooming with the mouse wheel. I want to keep the zoom functionality in the charts.

This is what I've tried so far:

• 
  Adding manual wheel event listeners with { passive: false } in ngAfterViewInit
  
  
• 
  Setting touch-action: none in CSS for the chart container and canvas
  
  
• 
  Confirming zoom is enabled properly in the chart config
  

Continue reading...