Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to disable scroll wheel zoom in ApexCharts?

I’ve got a line chart in my app using ApexCharts:

import ApexCharts from "apexcharts";

var options = {
  chart: {
    type: "line",
  },
  series: [
    {
      name: "sales",
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
    },
  ],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
  },
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

When I hover the chart and scroll using the mouse wheel, the chart zooms in/out. How do I disable this behavior while still allowing to select areas of the chart to Zoom (just disable the scroll wheel behavior)?

Example

Tags:

2

Answers


  1. 0

    in your chart object, set chart.zoom.enabled to false

    https://apexcharts.com/docs/options/chart/toolbar/#zoom

    var options = {
  chart: {
    type: "line",
    zoom: {
      enabled: false,
    }
  },
  series: [
    {
      name: "sales",
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
    },
  ],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
  },
};

    Note: original question did not mention still allowing to select areas of the chart to zoom

    Login or Signup to reply.
  2. 0

    To disable the zoom when using the mouse wheel, you can use the property chart.zoom.allowMouseWheelZoom

    For example, the code below disables the zoom for scrolling only (The area can still be zoomed in on by selecting it):

    chart = {
  type: "area",
  zoom: {
    enabled: true,
    allowMouseWheelZoom: false
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search