React Apex-charts Unable to change chart.id

Question

I'm unable to change my chart id dynamically and cant understand why. The reason I want to change it is because it is related to the graph filename , when I want to export a graph as CSV or Image. Also I would need the chart id to generate some PDF documents.

Lets assume I have the following code :

import { useState, useEffect } from 'react';
import Chart from 'react-apexcharts';

const [chartId, setChartId] = useState('');
const [numberSetNumber, setChartId] = useState('12345');
const [storeId, setStoreId] = useState('store123');
const [job, setJob] = useState('JobName');

 const [options, setOptions] = useState({
    chart: {
      id: chartId,
      animations: {
        enabled: false,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },
    title: {
      text: job,
      align: 'center',
    },
    xaxis: {
      type: 'datetime',
      categories: [],
    },
    yaxis: {
      labels: {
        formatter: (val) => formatLabels(val),
      },
    },
    noData: {
      text: 'No data selected...',
    },
    markers: {
      size: 0,
    },
    tooltip: {
      x: {
        format: 'dd/MM/yy HH:mm',
      },
    },
    series: [],
  });

useEffect(() => {
    setChartId(
      `${number}_store_${storeId}_${job}`
    );
    if (storeId) {
      setOptions({
        series: storeData[storeId].graphData.series,
        xaxis: {
          categories: storeData[storeId].graphData.options.xaxis.categories,
        },
        title: {
          text: job,
        },
      });
    }
  }, [storeId, storeData, job]);

return (

.... some dropdowns changing storeId, storeData, job,etc... 

    <Box>
         {chartId}
    {options.chart.id} // <--- here everything is reflected just fine. chartId value is being changed, options.chart.id as well , but when I try to export the graph , I'm getting an automatically generated name , as if options.chart.id was undefined. Is this a bug of react-apexcharts or I'm doing something wrong ? 
        <Chart
          options={options}
          series={options.series}
          height="500px"
          width="99%"
          type="area"
        />
    </Box>
  );
};

export default Graphs;

I have also tried doing this inside the useEffect method :

  useEffect(() => {
    setChartId(
      `${number}_store_${storeId}_${job}`
    );
    if (storeId) {
      setOptions({
        chart: { id: chartId },
        series: storeData[storeId].graphData.series,
        xaxis: {
          categories: storeData[storeId].graphData.options.xaxis.categories,
        },
        title: {
          text: job,
        },
      });
    }
  }, [storeId, storeData, job, chartId]);

When I try to export the graph I'm getting an automatically generated id , as if the id was undefined :

Any idea why changing the options.chart.id is not working ?

Answer 1

I see a few things here;

First of all, there's an option called toolbar, why don't you use it?

toolbar: {
  export: {
    svg: {
      filename: 'XYZ',
    },
  }
}

https://apexcharts.com/docs/options/chart/toolbar/

Second, you wanna update options but as I see you completely override them. Why don't you try to update like that?

setOptions({
  ...options,
  chart: {
    ...options.chart,
    id: `${number}_store_${storeId}_${job}`,
  },
  series: storeData[storeId].graphData.series,
  xaxis: {
    ...options.xaxis,
    categories: storeData[storeId].graphData.options.xaxis.categories,
  },
  title: {
    ...options.title,
    text: job,
  },
});

Third, you want your chartId to be ready when it comes to this line

if (storeId) {

But it would be a batch update which means your chartId is not updated yet and you use its old value. To prevent it I've changed this line

chart: {
  ...options.chart,
  id: chartId,
},

with this

chart: {
  ...options.chart,
  id: `${number}_store_${storeId}_${job}`,
},

Check this SO answer: React batch updates for multiple setState() calls inside useEffect hook