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.

View the toolbar configuration on [chart.toolbar](/docs/options/chart/#toolbar) page.

To learn more about zooming, please refer to [chart.zoom](/docs/options/chart/#zoom) configuration

---

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. To activate pan as the default pointer mode, disable zoom in the toolbar tools and enable pan:

const options = {
  chart: {
    type: 'line',
    zoom: {
      enabled: true  // zoom must remain enabled for the chart to be interactive
    },
    toolbar: {
      tools: {
        zoom: false,  // hide the zoom rectangle tool button
        pan: true     // show the pan (hand) tool button and activate it by default
      }
    }
  },
  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 unless you hide both and rely on programmatic control.

---

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.

const options = {
  chart: {
    type: 'line',
    selection: {
      enabled: true,
      type: 'x'   // 'x' | 'y' | 'xy'
    }
  },
  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()

// Listen for the selection event to read the selected range
chart.addEventListener('selection', function (event, chartContext, config) {
  // config.xaxis contains the selected range
  const min = config.xaxis.min
  const max = config.xaxis.max
  console.log('Selected x range:', min, 'to', max)
})

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.