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 ponent
<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]
    ]
  }]
}

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 ponent
<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]
    ]
  }]
}

• javascript
• reactjs
• typescript
• apexcharts

2 Answers 2

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,
  }
},

Not sure if these issue still persist. For future, ApexCharts v3.54.1. Do set allowMouseWheelZoom: false.

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