Description
I have a component which has the Apex Chart throwing this error when component is mounted
"ReferenceError: resolve is not defined"
`import { Row, Col } from "antd";
import React, { Suspense, useEffect, useState } from "react";
const ReactApexChart = React.lazy(() => import("react-apexcharts"));
const ChartComponent = () => {
const [mounted, setMounted] = useState(false);
const chartData = {
series: [55, 30, 15],
options: {
chart: {
type: "donut",
background: "transparent",
animations: {
enabled: false,
},
},
stroke: {
show: false,
},
labels: ["Equities", "Crypto", "Cash"],
colors: ["#FFD700", "#B8860B", "#DAA520"], // Matched colors from donut chart image
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
tooltip: {
enabled: true,
y: {
formatter: (value) => $${value.toLocaleString()},
},
},
plotOptions: {
pie: {
donut: {
size: "55%", // Reduced from 75% to make donut thicker
},
},
},
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200,
},
},
},
],
},
};
useEffect(() => {
setMounted(true);
}, []);
return (
<Row gutter={[16, 16]}>
{[
{ label: "Equities", value: 29260, percentage: "55%" },
{ label: "Crypto", value: 10640, percentage: "30%" },
{ label: "Cash", value: 7980, percentage: "15%" },
].map((item, index) => (
<div
className={
w-4 h-4 rounded-full}style={{ backgroundColor: chartData.options.colors[index] }}
/>
{item.label}
<p className="text-white">${item.value.toLocaleString()}</p>
<p className="text-gray-400 bg-gray-700 px-2 py-1 rounded-full w-12">
{item.percentage}
</p>
</div>
</div>
))}
</Col>
<Col span={24} lg={12} className="h-full">
<Suspense fallback={<div>Loading...</div>}>
{mounted && (
<ReactApexChart
options={chartData.options}
series={chartData.series}
type="donut"
height={350}
/>
)}
</Suspense>
</Col>
</Row>
);
};
export default ChartComponent;
`
I've used various apex charts throughout my applications but this one is having issues. Implementation of others are fine and I've cross checked also. The issue is with the donut chart only