ReferenceError: resolve is not defined

[ihumza]

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]}> <Col span={24} lg={12} className="flex flex-col justify-between gap-2"> {[ { label: "Equities", value: 29260, percentage: "55%" }, { label: "Crypto", value: 10640, percentage: "30%" }, { label: "Cash", value: 7980, percentage: "15%" }, ].map((item, index) => ( <div key={index} className="flex items-center justify-between"> <div className="w-full flex justify-between items-center gap-2"> <div className={w-4 h-4 rounded-full} style={{ backgroundColor: chartData.options.colors[index] }} /> <p className="text-gray-300">{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

[danteyc]

Hi, did you find any solution?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.