Open mtr1990 opened 3 months ago
We have the same issue, we can also confirm that this bug got introduced in 3.49.1, the previous version didn't have this issue.
This happens randomly when we clone a clean repo and make a yarn install, sometimes it works sometimes not, but always is this library in the same version 1.4.1
Had the same issue, with 3.49.0 works fine.
Same issue here.
Strange though, I had two different (identical) instances of my app running in dev mode on the same machine; one was rendering correctly and one was throwing the error mentioned above -- and then I closed the browser on the working instance and re-opened it, and it started failing also. Never could get either of them working again until I downgraded to 3.49.0, after which they started rendering properly.
Can anyone create a codesandbox to reproduce this issue? I cannot reproduce it locally with apexcharts@3.49.1
and react-apexcharts@1.4.1
I'm not certain the behavior is completely consistent, so take this all with a grain of salt.
chart.id
property from the chart options on BOTH charts, the charts seemed to always render correctly.import { ApexOptions } from "apexcharts";
import Chart from "react-apexcharts";
const ChartsComponent = () => {
const barChartSeries = [
{
data: [10, 20, 70],
},
];
const barChartOptions: ApexOptions = {
chart: {
// id: "basic-bar",
},
xaxis: {
categories: ["A", "B", "C"],
},
};
const donutChartSeries = [10, 20, 70];
const donutChartOptions: ApexOptions = {
chart: {
// id: "donut-chart",
type: "donut",
},
labels: ["Series A", "Series B", "Series C"],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 300,
},
},
}],
};
return (
<div>
<Chart options={barChartOptions} series={barChartSeries} type="bar" width="320" />
<Chart options={donutChartOptions} series={donutChartSeries} type="donut" width="320" />
</div>
);
};
export default ChartsComponent;
But when I include the chart.id
property, the charts crash the page.
Experimenting further -- if I remove the responsive
property from the donut chart, then both charts render fine, EVEN with the id
properties included.
Stay with me now... 😁 it's gonna get bumpy!
If I move the responsive
property you see in the example from the donutChartOptions
, to the barChartOptions
-- with the id
properties still in place -- then the Donut Chart renders, but the Bar Chart does not.
I removed the id
property from the Bar Chart only, and the bar chart now renders (as well as the rest of the page!).
After restoring the id
property (resetting the state back to step 4) -- I swapped the position of the bar chart and donut chart:
<div>
<Chart options={barChartOptions} series={barChartSeries} type="bar" width="320" />
<Chart options={donutChartOptions} series={donutChartSeries} type="donut" width="320" />
</div>
Now, the whole page crashes again.
Following the earlier procedure, I moved the response
property back to the donutChartOptions
. The Bar Chart now renders, and the Donut Chart does not.
Removing the id
property from the Bar Chart now makes now difference (as we might expect). But removing the id
from the Donut Chart options, the whole page renders correctly again.
Update: I probably should have narrowed this down earlier, but it appears that the responsive.breakpoint
property is the source of the conflict in this particular example -- removing the responsive.options
property had no effect one way or the other, but removing the breakpoint property allows the charts to render even with the id
property set. When both responsive.breakpoint
and chart.id
are set, bad things happen.
Hi,
When I set id for chart: