[ChartID] Cannot read properties of undefined (reading 'node')

[mtr1990]

Hi,

When I set id for chart:

    chart: {
      id: 'dashboardChart',  // => here
      stacked: true,
    },

"apexcharts": "^3.49.1",  // => Not bug in 3.49.0
"react-apexcharts": "^1.4.1",

[xHeaven]

We have the same issue, we can also confirm that this bug got introduced in 3.49.1, the previous version didn't have this issue.

[ulisescarreonalvarez]

This happens randomly when we clone a clean repo and make a yarn install, sometimes it works sometimes not, but always is this library in the same version 1.4.1

[pnedelko]

Had the same issue, with 3.49.0 works fine.

[brianjlacy]

Same issue here.

Strange though, I had two different (identical) instances of my app running in dev mode on the same machine; one was rendering correctly and one was throwing the error mentioned above -- and then I closed the browser on the working instance and re-opened it, and it started failing also. Never could get either of them working again until I downgraded to 3.49.0, after which they started rendering properly.

[junedchhipa]

Can anyone create a codesandbox to reproduce this issue? I cannot reproduce it locally with apexcharts@3.49.1 and react-apexcharts@1.4.1

[brianjlacy]

I'm not certain the behavior is completely consistent, so take this all with a grain of salt.

1. In the following example, when I omitted the chart.id property from the chart options on BOTH charts, the charts seemed to always render correctly.

import { ApexOptions } from "apexcharts";
import Chart from "react-apexcharts";

const ChartsComponent = () => {
  const barChartSeries = [
    {
      data: [10, 20, 70],
    },
  ];

  const barChartOptions: ApexOptions = {
    chart: {
      // id: "basic-bar",
    },
    xaxis: {
      categories: ["A", "B", "C"],
    },
  };

  const donutChartSeries = [10, 20, 70];

  const donutChartOptions: ApexOptions = {
    chart: {
      // id: "donut-chart",
      type: "donut",
    },
    labels: ["Series A", "Series B", "Series C"],
    responsive: [{
      breakpoint: 480,
      options: {
        chart: {
          width: 300,
        },
      },
    }],
  };

  return (
    <div>
      <Chart options={barChartOptions} series={barChartSeries} type="bar" width="320" />
      <Chart options={donutChartOptions} series={donutChartSeries} type="donut" width="320" />
    </div>
  );
};

export default ChartsComponent;

2. But when I include the chart.id property, the charts crash the page.

3. Experimenting further -- if I remove the responsive property from the donut chart, then both charts render fine, EVEN with the id properties included.

Stay with me now... 😁 it's gonna get bumpy!

4. If I move the responsive property you see in the example from the donutChartOptions, to the barChartOptions -- with the id properties still in place -- then the Donut Chart renders, but the Bar Chart does not.

5. I removed the id property from the Bar Chart only, and the bar chart now renders (as well as the rest of the page!).

6. After restoring the id property (resetting the state back to step 4) -- I swapped the position of the bar chart and donut chart:

    <div>
      <Chart options={barChartOptions} series={barChartSeries} type="bar" width="320" />
      <Chart options={donutChartOptions} series={donutChartSeries} type="donut" width="320" />
    </div>

Now, the whole page crashes again.

7. Following the earlier procedure, I moved the response property back to the donutChartOptions. The Bar Chart now renders, and the Donut Chart does not.

8. Removing the id property from the Bar Chart now makes now difference (as we might expect). But removing the id from the Donut Chart options, the whole page renders correctly again.

Update: I probably should have narrowed this down earlier, but it appears that the responsive.breakpoint property is the source of the conflict in this particular example -- removing the responsive.options property had no effect one way or the other, but removing the breakpoint property allows the charts to render even with the id property set. When both responsive.breakpoint and chart.id are set, bad things happen.