apexcharts / react-apexcharts

📊 React Component for ApexCharts
https://apexcharts.com
MIT License
1.32k stars 159 forks source link

Unable to change chart.id #534

Closed zlobjul closed 1 year ago

zlobjul commented 1 year ago

I'm unable to change my chart id dynamically. 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 :

image

zlobjul commented 1 year ago

I have used the toolbar option to configure the filename of the exports , see https://stackoverflow.com/questions/76761985/react-apex-charts-unable-to-change-chart-id/76762257#76762257