React Hooks ApexCharts.exec

export default function ExampleChart({
  data,
  ...props
}) {
  let series = data

  useEffect(() => {
    ApexCharts.exec("example", 'updateSeries', series)  
  }, [series]);

  return (
            <Charts
              options={options}
              series={[]}
              type={"area"}
              height={300}
            />
  );
}

let options = {
   chart: { 
      id: "example",
      group: "example-groups"
   }, 
   ...
}

gives the error TypeError: i.publicMethods is undefined at line ApexCharts.exec("example", 'updateSeries', series). Error is probably because I’m using it incorrectly.

What is the correct way to update series using React Hooks?

[thellimist]

This solution works

...
import Charts from "react-apexcharts";
import ApexCharts from 'apexcharts';

export default function Chart({ 
  newSeries,
  newOptions,
  ...props 
}) {

  useDeepCompareEffect(() => { // or useEffect
    ApexCharts.exec(`Chart:${id}`, 'updateSeries' , newSeries);
    ApexCharts.exec(`Chart:${id}`, 'updateOptions' , newOptions, false, true, true);
  },[newSeries, newOptions]);

  return (

            <Charts
              options={newOptions}
              series={newSeries}
              type='line'
              height='350'
            />
  );
}

[gfortaine]

@thellimist It looks like that it works fine : https://codesandbox.io/s/react-basic-example-7xce1

However, it seems that your example is a bit of nonsense. What is the point of updating the series by calling the method updateSeries in a useEffect Hook ? If you update the props data in your example, the Chart will also update with the new props…

<Chart options={options} series={series} type="area" width="300" />