React apex chart does not render after series array changes [closed]

Question

You will find answer in this post

I am new with react I used apexcharts which worked really fine but whenI had to use this chart components, in other components too, in the same project. Thats where i got a problem in a chart. Suddenly 1 of my chart started to not update any more when series change. I spent a week to figure it out that what was wrong and thought may be i could share it here so some body could find this fix earlier.

So what I found are 2 things;

1. react-apexcharts is just a wrapper of apexcharts and each chart should have a unique chart id which you define in options. So if you want to use your component in multiple places it would be a good idea to receive chart ID in props and set it like,

...
this.state = {
      options:  {
        chart: {
          id: props.chartId,
...

2. We can invoke a method to render the chart or override the series array of chart by using global apexcharts methods in your componentDidMount() or UseEffect() like,

import apexchart from "apexcharts";
...
  componentDidUpdate(){
    const {chartId, seriesData} = this.props;
    //here it overrides the chart series with seriesData from props
    apexchart.exec(chartId,'updateSeries', seriesData);
  };
...

There are other plenty of useful methods that can we use from apexcharts as mentioned in the documentation here: https://apexcharts.com/docs/methods/

I hope some body find it helpful.

Thank you.