Search code examples
javascriptsassnext.jsapexcharts

TypeError: Cannot read properties of undefined (reading 'toString') (apex-charts)

I was working on a personal project, and I was thinking of using apexcharts, but this error shown in the image started to appear, it disappears if I set the width and height properties in the Chart component, it also disappears if I put the site in production, but at the moment I'm working on the responsiveness of the layout

1

export function Chart() {
    const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
    const options: ApexOptions = {
        chart: {
            id: "chart",
            background: "#030a4d8d",
            fontFamily: "Roboto",
            width: "auto",
            height: "auto",
            redrawOnWindowResize: true,
            selection: {
                enabled: false,
            },
            toolbar: {
                show: false,
            },
        },
        dataLabels: {
            background: {
                borderRadius: 10,
            },
            style: {
                colors: ["#142085"],
            },
        },
        colors: ["#7e838c", "#474d59", "#363b47"],
        grid: {
            show: false,
        },
        legend: {
            fontFamily: "Roboto",
        },
        noData: {
            text: "Nenhum dado encontrado",
            style: {
                fontFamily: "Roboto",
            },
        },
        xaxis: {
            categories: ["Sistemas", "Comandos", "Servidores"],
            labels: {
                style: {
                    colors: "#f5f7fa",
                    fontFamily: "Roboto",
                },
            },
        },
        yaxis: {
            show: false,
        },
        series: [
            {
                data: [100, 200, 300],
            },
        ],
        tooltip: {
            enabled: false,
        },
    };

    return (
        <div className="chart-container">
            <Chart
                options={options}
                series={options.series}
                type="bar"
                width={300}
                height={150}
            />
        </div>
    );
}

I've already tried to define the width in the component and style it over it in the css, but the component's styling prevails, I'm a beginner in the area of ​​frameworks, and I can't even read English, I just hope that this error disappears without me having to define the width and height properties in the chart component

Solution

  • give width like this in your chart component.

            <Chart
            options={options}
            series={options.series}
            type="bar"
            width={"100%"}
            height={150}
        />