Issue with zooming and click events

[slipperystairs]

I seem to be having issues implementing a click event alongside with having the zoom selection enabled. When using the zoom in selection feature the data points will act as if their marker was clicked, even though I am slightly to left (or right) of the actual point on the graph.

Is there a way to have the zoom selection feature not fire the click event? I would like to have the click event fire when the data point is actually clicked, not when the graph selects the point for me, is that possible?

I am using React, NextJS, and React Apex Charts.

Screenshot:

Code:

'use client';
import React from 'react';
import dynamic from 'next/dynamic';
import {
  Paper,
} from '@mui/material';
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

class Graph extends React.Component {
  constructor(opts) {
    super(opts);
    this.state = {
      view: 'Graph',
      series: [],
      options: {}
    }
    this.handleClick = this.handleClick.bind(this);
    this.getBody = this.getBody.bind(this);
  }

  getBody() {
    const { view, series, options } = this.state;
    let body = '';
    switch(view) {
      case 'Graph':
        body = (
          <Paper>
            <Chart
              type="line"
              height={300}
              options={options}
              series={series}
            />
          </Paper>
        );
        break;
      case 'Table':
        body = 'This is where my table would load';
        break;
      default:
        body = `Invalid view ${view}`;
        break;
    }
    return body;
  }

  handleClick(event, handleClick, opts) {
    console.log('opts: ', opts);
    const copy = { ...this.state };
    if (opts.dataPointIndex > 0) {
      copy.view = copy.view == 'Graph' ? 'Table' : 'Graph';
      this.setState(copy);
    }
  }

  componentDidMount() {
    const copy = { ...this.state };
    copy.series = [
      {
        name: 'Monthly Average Likes',
        type: 'line',
        data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10]
      },
      {
        name: 'Total Likes',
        type: 'line',
        data: [5, 9, 7, 3, 2, 11, 8, 4, 1, 0]
      }
    ];
    copy.options = {
      chart: {
        height: 400,
        type: 'line',
        tools: {
          selection: false,
          zoom: false,
        },
        events: {
          click: (event, chartContext, opts) => this.handleClick(event, chartContext, opts),
        },
      },
      title: {
        text: 'Monthly Avg Likes Vs Daily Likes',
      },
      colors: ['#269ffb', '#676767'],
      stroke: {
        curve: 'smooth',
      },
      labels: [
        '2024-08-01',
        '2024-08-02',
        '2024-08-02',
        '2024-08-03',
        '2024-08-04',
        '2024-08-05',
        '2024-08-06',
        '2024-08-07',
        '2024-08-08',
        '2024-08-09',
      ],
      xaxis: {
        categories: [
          '2024-08-01',
          '2024-08-02',
          '2024-08-02',
          '2024-08-03',
          '2024-08-04',
          '2024-08-05',
          '2024-08-06',
          '2024-08-07',
          '2024-08-08',
          '2024-08-09',
        ],
      },
      yaxis: {
        text: 'Total Likes',
      },
    };
    this.setState(copy);
  }

  render() {
    const body = this.getBody();
    return (
      <>
        { body }
      </>
    )
  }
}

export default Graph;