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

I have needed to change my resolve answers.

In React and Apex-chart, the chart will refresh the options only if you set another reference of your object. In my case I tried with the spread operator and Object.assign.

The problem was that the options of the chart are a complex object. So you need to do a deep copy with a library or a custom function (for performance, I had read "rfdc" is the best)