javascriptreactjstypescriptapexcharts

Apex charts disable scrolling / zooming


I have built a chart using the ApexCharts library and I want to disable the possibility of dragging the chart. How should I update my configurations (see below)? I couldn't find any detail in the documentation. This is my chart:

//My component
<Chart
  options={performanceLineChart.options}
  series={performanceLineChart.series}
/>

//My configurations
export const performanceLineChart = {
  options: {
    chart: {
      id: 'my-chart',
      type: 'line' as 'line',
      toolbar: {
        show: false //Disable toolbar
      }
    },
    stroke: {
      width: 5,
      curve: 'smooth' as 'smooth'
    },
    markers: {
      size: 4,
      hover: {
        size: undefined,
        sizeOffset: 2
      }
    },
    xasis: {
      type: 'numeric',
    }
  },
  series: [{
    name: 'Line 1',
    data: [
      [3066, 323],
      [6317, 312],
      [12498, 313],
      [24091, 326]
    ]
  },{
    name: 'Line 2',
    data: [
      [3516, 281],
      [7378, 268],
      [11502, 344],
      [21219, 371]
    ]
  }]
}

Solution

  • I'm guessing you're talking about selection zoom, you can turn it off like this

    chart: {
      id: 'my-chart',
      type: 'line' as 'line',
      toolbar: {
        show: false
      },
      zoom: {
        enabled: false,
      }
    },