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

admin管理员组

文章数量:1242789

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 ponent, it also disappears if I put the site in production, but at the moment I'm working on the responsiveness of the layout

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 ponent and style it over it in the css, but the ponent'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 ponent

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 ponent, it also disappears if I put the site in production, but at the moment I'm working on the responsiveness of the layout

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 ponent and style it over it in the css, but the ponent'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 ponent

• javascript
• sass
• next.js
• apexcharts

Share Improve this question Follow edited Jan 13, 2023 at 8:13 vimuth 5,6324848 gold badges9191 silver badges124124 bronze badges asked Jan 13, 2023 at 1:29 Uilian ComimUilian Comim 4311 silver badge33 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 14

give width like this in your chart ponent.

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

Try to dynamically import your whole ponent, not only the apex-chart library.

I mean, go down in the tree:

Root|
    |
    |Page.js| <- use next/dynamic here to import "Component.js"
            |
            |Component.js| <- instead of use next/dynamic here.
                         |
                         |apex-chart ponent

import dynamic from 'next/dynamic';
import { Props } from 'react-apexcharts';
const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false })

const state: Props = {

    series: [{
        name: "Desktops",
        data: [10, 41, 35, 51, 49, 62, 69]
    }],
    options: {
        chart: {
            height: 350,

            type: 'line',
            zoom: {
                enabled: false
            }
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'straight'
        },

        grid: {
            row: {
                colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                opacity: 0.5
            },
        },
        xaxis: {
            categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat',],
        }
    },


};
export function DashboardChartComponent() {
    return <ReactApexChart options={state.options} series={state.series} type="line" width={"100%"} height={350} />

}

Specifying both height and width at the same time worked for me.

 <ApexChart
    options={chartOptions}
    series={seriesData}
    type="bar"
    height={150}
    width={"100%"}
/>

本文标签： javascriptTypeError Cannot read properties of undefined (reading 39toString39) (apexcharts)Stack Overflow