Selection event produce error -> Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null

Bug report

Selection event produce error -> When mouseover a line or marker --> Uncaught TypeError: Cannot read property ‘getBoundingClientRect’ of null

"apexcharts": "3.19.3",
"gatsby": "2.23.3",
"react": "16.13.1",
"react-apexcharts": "1.3.7",
"react-loadable": "5.5.0",

const ReactApexChart = Loadable({
  loader: () => import('react-apexcharts'),
});
ReactApexChart.preload();

  const now = Date.now();
  const chartGroup = `latency-group-${now}`;
  const targetChartId = `latency-chart-${now}`;
  const brushChartId = `navigator-chart-${now}`;

  // data is { x: number, y: number|null }[]; // x is Date in milliseconds
  const series: ApexAxisChartSeries = [
    {
      name,
      type: 'line',
      data: data,
    },
  ];

  const day = 24 * 60 * 60 * 1000;
  const defaultBrushSelection = {
    min: new Date(data[data.length - 1].date).getTime() - day,
    max: new Date(data[data.length - 1].date).getTime(),
  };

  const targetChartOptions: ApexCharts.ApexOptions = {
    chart: {
      id: targetChartId,
      group: chartGroup,
      type: 'line',
      animations: {
        enabled: false,
        animateGradually: {
          enabled: false,
        },
        dynamicAnimation: {
          enabled: false,
        },
      },
    },
    colors: [color],
    stroke: {
      width: 1,
      curve: 'smooth',
    },
    dataLabels: {
      enabled: false,
    },
    fill: {
      opacity: 1,
      type: 'solid',
    },
    markers: {
      size: 0,
      colors: [color],
      strokeColors: [color],
      strokeWidth: 0,
      hover: {
        size: 4,
      },
    },
    xaxis: {
      type: 'datetime',
    },
    yaxis: {
      floating: false,
      opposite: true,
      showForNullSeries: false,
      forceNiceScale: true,
      tickAmount: 5,
      labels: {
        minWidth: 50,
        maxWidth: 200,
        formatter: function (val: number, options: any) {
          if (val > 0 && val < 1000) {
            return `${val} ms`;
          }

          return `${val / 1000} s`;
        },
      },
    },
    tooltip: {
      marker: {
        show: false,
      },
      x: {
        show: false,
        format: 'dddd, MMM dd, HH:mm',
      },
      y: {
        title: {
          formatter: (seriesName: string) => '',
        },
        formatter: (val: number, options: any) => {
          let suffix = 's';

          if (val > 0 && val < 1000) {
            suffix = 'ms';
          }

          return `<span style="color: #008FFB;"> ● </span><b><span>${val} ${suffix}</span></b>`;
        },
      },
    },
  };

  const brushChartOptions: ApexCharts.ApexOptions = {
    chart: {
      id: brushChartId,
      group: chartGroup,
      type: 'line',
      animations: {
        enabled: false,
        animateGradually: {
          enabled: false,
        },
        dynamicAnimation: {
          enabled: false,
        },
      },
      events: {
        // selection event produce error -> When mouseover on a line or marker
        // --> Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
        selection: function (chartContext: any, { xaxis, yaxis }: any) {
          console.log(chartContext, xaxis, yaxis);
        },
      },
      brush: {
        target: targetChartId,
        enabled: true,
        autoScaleYaxis: true,
      },
      selection: {
        enabled: true,
        type: 'x',
        xaxis: defaultBrushSelection,
      },
    },
    colors: [color],
    stroke: {
      width: 1,
      curve: 'smooth',
    },
    dataLabels: {
      enabled: false,
    },
    fill: {
      opacity: 1,
      type: 'solid',
    },
    xaxis: {
      type: 'datetime',
      tooltip: {
        enabled: false,
      },
    },
    yaxis: {
      // show: false; yaxis opposite doesn't work
      // Using labels.formatter to remove yaxis label (or .apexcharts-yaxis { display: none; })
      show: true,
      opposite: true,
      tickAmount: 0,
      showForNullSeries: false,
      forceNiceScale: true,
      labels: {
        minWidth: 50,
        maxWidth: 200,
        formatter: function (val: number, options: any) {
          return '';
        },
      },
    },
  };

<>
      <div className="metric-latency__chart">
        <ReactApexChart
          options={targetChartOptions}
          series={series}
          type="line"
          height="100%"
          width="100%"
        />
      </div>

      <div className="metric-navigator__chart">
        <ReactApexChart
          options={brushChartOptions}
          series={series}
          type="line"
          height="100%"
          width="100%"
        />
      </div>
    </>

Codepen

Modify this codepen to demonstrate the problem clearly, just fork it and paste the resulting codepen in your issue. Please make sure this is a minimal example, containing only the minimum necessary code to help us troubleshoot your problem. Issues/bug reports without reproducible example will be given least priority, so make sure you include one.

If you are using vue-apexcharts, and want to create a demo in Vue environment, use CodeSandbox Vue template If you are using react-apexcharts, and want to create a demo in React environment, use CodeSandbox React template

Explanation

• What is the behavior you expect?
• What is happening instead?
• What error message are you getting?

[RIckyBan]

FYI

Hi, I’m using apexcharts on Next.js, and got this error with dataPointSelection event of timeline chart. I found a workaround.

In my case, this error seems to occur when I use setState in the dataPointSelection event callback. So I use setTimeout to change the execution timing, and the error disappears.

example

      events: {
        dataPointSelection: (event, chartContext, config) => {
          const data = chartSeries[0].data[config.dataPointIndex];
          setTimeout(() => {
            setItemId(data.id);
          }, 10);
        },
      },

Hope this helps.

[Invictus-Munish]

FYI

Hi, I’m using apexcharts on Next.js, and got this error with dataPointSelection event of timeline chart. I found a workaround.

In my case, this error seems to occur when I use setState in the dataPointSelection event callback. So I use setTimeout to change the execution timing, and the error disappears.

example

      events: {
        dataPointSelection: (event, chartContext, config) => {
          const data = chartSeries[0].data[config.dataPointIndex];
          setTimeout(() => {
            setItemId(data.id);
          }, 10);
        },
      },

Hope this helps.

Thanks that helped me.