Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'toString')

Question

I implemented a donut chart from react-apex chart and keep getting this error, whenever I render the page where the chart is located at. However once I change a property of the chart, the chart will be rendered without error in the frontend and is shown accordingly. Can anyone help me with this? My code looks like the following:

Chart.tsx

"use client";
import { ApexOptions } from "apexcharts";
import React, { useState } from "react";
import dynamic from "next/dynamic";
const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });

interface ChartThreeState {
    series: number[];
}

const options: ApexOptions = {
    chart: {
        type: "donut",
    },
    colors: ["#85b473f8", "#183d6df8"],
    labels: ["Verwendete Benefits", "Noch verfügbare Benefits"],
    legend: {
        show: true,
        position: "bottom",
    },

    plotOptions: {
        pie: {
            donut: {
                size: "65%",
                background: "transparent",
            },
        }, 
    },
    dataLabels: {
        enabled: false,
    },
    responsive: [
        {
            breakpoint: 2600,
            options: {
                chart: {
                    width: 380,
                },
            },
        },
        {
            breakpoint: 640,
            options: {
                chart: {
                    width: 200,
                },
            },
        },
    ],
};

const Chart: React.FC = () => {
    const [state, setState] = useState<ChartThreeState>({
        series: [2, 0]
    });

    return (
        <div className="pt-4 col-span-12 ring-1 ring-secondary mx-0 rounded-lg border border-secondary bg-white px-5 pb-5 shadow-default sm:px-7.5 xl:col-span-6">
            <div className="mb-3 justify-between gap-4 sm:flex">
                <div>
                    <h5 className="text-xl font-semibold text-primary">
                        Nutzung
                    </h5>
                </div>
            </div>

            <div className="mb-2">
                <div id="chartThree" className="mx-auto flex justify-center">
                    <ReactApexChart
                        options={options}
                        series={state.series}
                        width={"100%"}
                        type="donut"
                    />
                </div>
            </div>
        </div>
    );
};

export default Chart;

Error Call Stack:

Call Stack
t.value
node_modules/apexcharts/dist/apexcharts.common.js (6:408535)
t.value
node_modules/apexcharts/dist/apexcharts.common.js (6:404268)
t.value
node_modules/apexcharts/dist/apexcharts.common.js (14:37170)
t.eval [as create]
node_modules/apexcharts/dist/apexcharts.common.js (6:4476)
eval
node_modules/apexcharts/dist/apexcharts.common.js (14:36561)
new Promise
<anonymous>
t.value
node_modules/apexcharts/dist/apexcharts.common.js (14:21686)
r.value
node_modules/react-apexcharts/dist/react-apexcharts.min.js (1:2575)
invokeLayoutEffectMountInDEV
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23855:0)
invokeEffectsInDev
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26666:0)
legacyCommitDoubleInvokeEffectsInDEV
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26646:0)
commitDoubleInvokeEffectsInDEV
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26630:0)
flushPassiveEffectsImpl
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26339:0)
flushPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26263:0)
eval
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26000:0)
workLoop
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (261:0)
flushWork
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (230:0)
MessagePort.performWorkUntilDeadline
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (534:0)

In the page itself I just render and import the component in the common way. I tried multiple things even switching to different libraries, but I personally think that apexcharts looks the most promising when rendering the Chart.

Answer 1

I was having the same problem, but apparently the width and height attributes are required on the element.

So try adding the height in the attribute of your component.

<ReactApexChart
  options={options}
  series={state.series}
  width={"100%"}
  height={300}
  type="donut"
/>