0

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

Improve this question
1
  • You can override the default wheel event on the chart container manually in Angular using Renderer2 and { passive: false }. Commented Jul 10 at 12:31
Related questions
4
How to disable scroll wheel zoom in ApexCharts?
0
ApexCharts: overlapping tooltips with grouped charts
2
Should I use touch-action: none instead of preventDefault() to stop scrolling on touch device?
Load 3 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.