Apexcharts - ReactJs - real time - Cannot read property 'filter' of undefined

Question

I have a chart created in a composant (hooks) :

return (
<div id="chart-candlestick">
    <ReactApexChart options={optionsCandles} series={seriesCandles} type="candlestick"
                    height={290}/>
</div>)

and I tried to add values to test the realtime possibility. (Without it, it works fine !) My problem is that I tried for several hours and didn't find why I have this exception.

So, I have named my chart ("candle") in the options :

{
    chart: {
        type: 'candlestick',
        height: 290,
        id: 'candles'   
        {...}
    },
    {...}
}

and so, time to time I tried to used the exec method of ApexCharts to add more data manualy:

function fetchLastDatas() { 
    const date = dateAdd(candleDatas[candleDatas.length - 1].x,"minute",5)
    var obj = {
        x: date,
        y: candleDatas[candleDatas.length - 1].y
    }
    candleDatas.push(obj);

    ApexCharts.exec('candles', 'updateSeries', [{
        data:candleDatas
    }], true)

}

My array has datas but I have this exception on the line "ApexCharts.exec" and I don't know why :

Uncaught TypeError: Cannot read property 'filter' of undefined
    at Function.value (apexcharts.common.js:14)
    at Function.value (apexcharts.common.js:14)
    at fetchLastDatas (ChartCaneva.js:178)
    

I'm new to use this library (and in React in general) so thanks for the help !

Good night (or morning) !

Answer 1

Ran into a similar error a while back.

Seems that ApexCharts.exec is complaining because it's trying to update a component (chart with id='candles') that hasn't been mounted yet.

You could try adding a console.log(document.getElementById('chart-candlestick')) in the update function to check this.

Maybe try adding a condition that checks whether the component is mounted before trying to run any updates.

useRef?

function fetchLastDatas(chartIsMounted) {
  // ...
  // debug: console.log(document.getElementById('chart-candlesticks'));
  if(chartIsMounted !== null) {
    ApexCharts.exec('candles', 'updateSeries', [{ /* ... */}])
  }
}

function Parent() {
  let chartRef = React.useRef(null);

  React.useEffect(() => {
    fetchLastDatas(chartRef.current);
  }, []);

  return <Child chartRef={chartRef} /> // You could use React.forwardRef instead and pass a `ref` prop
}

function Child({ chartRef }) {
  return <ChartContainer chartRef={chartRef} />;
}

function ChartContainer({ chartRef }) {
  return (
    <div id="chart-candlestick">
      <ReactApexChart id='candles' ref={chartRef} />
    </div>
  );
}