Interactivity

When plotting large dataSets, zooming, panning and scrolling helps to get a clear view by providing a closer look into chart area.
Zooming can be enabled on both X Axis and Y Axis together or individually.
You can see all interactivity options in the chart toolbar.

See chart.toolbar for the full toolbar configuration, and chart.zoom for the zoom behavior.

---

Enabling zoom

Set chart.zoom.enabled: true to let the user drag a selection rectangle on the chart to zoom in. The type option controls which axis is zoomed.

const options = {
  chart: {
    type: 'line',
    zoom: {
      enabled: true,
      type: 'x',          // 'x' zooms the x-axis only
                          // 'y' zooms the y-axis only
                          // 'xy' zooms both axes simultaneously
      autoScaleYaxis: true // rescale the y-axis to fit the zoomed x range
    }
  },
  series: [
    {
      name: 'Temperature',
      data: [28, 31, 27, 34, 40, 38, 33, 29, 35, 42, 39, 36]
    }
  ],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  }
}

const chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

type: 'x' is the most common setting. When the user drags a horizontal selection, only the x range changes and the y-axis adjusts if autoScaleYaxis is true. Setting autoScaleYaxis: false keeps the y-axis fixed at its original scale while zoomed.

---

Enabling pan

Pan mode lets the user click and drag to scroll through the chart without selecting a zoom region. Zoom must stay enabled for panning to work. To make pan the active tool when the chart loads, set toolbar.autoSelected: 'pan' (the tools flags only control which buttons are shown, not which one is active).

const options = {
  chart: {
    type: 'line',
    zoom: {
      enabled: true  // pan works while zoom is enabled
    },
    toolbar: {
      autoSelected: 'pan',  // 'zoom' (default) | 'selection' | 'pan'
      tools: {
        pan: true,   // show the pan (hand) button
        zoom: true   // keep the zoom rectangle button available too
      }
    }
  },
  series: [
    {
      name: 'Page views',
      data: [120, 145, 133, 170, 188, 162, 195, 210, 198, 225, 240, 218]
    }
  ],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  }
}

const chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

The user can still switch between zoom and pan using the toolbar buttons at any time.

---

Mouse wheel and touch gestures

As of ApexCharts 6.0, these gestures are on by default whenever zoom.enabled is true, so most charts are interactive without any extra configuration:

• Mouse wheel zoom (zoom.allowMouseWheelZoom, default true): scrolling the wheel over the plot zooms the x-axis. Set it to false if you would rather let the page scroll over the chart.
• Pinch zoom (zoom.pinch, default true): a two-finger pinch on touch devices zooms the x-axis around the pinch center.
• Kinetic pan (pan.inertia, default true): a one-finger pan released with velocity keeps gliding and decelerates, controlled by pan.friction (default 0.92).

const options = {
  chart: {
    zoom: {
      enabled: true,
      allowMouseWheelZoom: false  // let the page scroll over the chart instead
    }
  }
}

---

Selection mode

Selection mode draws a shaded region when the user drags the chart. Unlike zoom, it does not change the visible range. Instead it fires a selection event that you can use to drive a linked chart, a date-range picker, or any other external UI.

Read the selected range from the selection event, which you register in chart.events. The handler receives the chart context and an object with the selected xaxis and yaxis ranges (there is no leading DOM event argument).

const options = {
  chart: {
    type: 'line',
    selection: {
      enabled: true,
      type: 'x'   // 'x' | 'y' | 'xy'
    },
    events: {
      selection: function (chartContext, { xaxis, yaxis }) {
        console.log('Selected x range:', xaxis.min, 'to', xaxis.max)
      }
    }
  },
  series: [
    {
      name: 'Revenue',
      data: [3200, 4100, 3800, 5200, 4700, 6100, 5800]
    }
  ],
  xaxis: {
    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
}

const chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

Selection mode is particularly useful in brush-chart setups where one small chart acts as a range selector for a larger detail chart.

---

Programmatic zoom

Call chart.zoomX(min, max) to zoom the chart to a specific x range from code, without requiring any user gesture. Pass Unix timestamps (milliseconds) for datetime axes, or category index numbers for category axes.

// Zoom a datetime axis to Q1 2024
chart.zoomX(
  new Date('2024-01-01').getTime(),
  new Date('2024-03-31').getTime()
)

For a category axis with integer indices:

// Zoom to show only the first five categories (indices 0-4)
chart.zoomX(0, 4)

To reset back to the full range, call chart.resetSeries() or have the user click the reset zoom button in the toolbar.