search

apexcharts / react-apexcharts

📊 React Component for ApexCharts
https://apexcharts.com
MIT License
1.29k stars 151 forks source link

apexcharts.common.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'group') #598

Open sai12-creator opened 4 months ago

sai12-creator commented 4 months ago

hi everyone im getting very complex error actually in localhost react-apexchart working fine not giving any errors in console but coming to dev portal above error is throwing only in dev portal local is working fine
apexcharts.common.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'group') at apexcharts.common.js:6:166282 at Array.forEach () at apexcharts.common.js:6:166243 at Array.forEach () at t.value (apexcharts.common.js:6:166209) at t.value (apexcharts.common.js:6:172254) at t.value (apexcharts.common.js:6:168242) at t.value (apexcharts.common.js:6:417928) at t.value (apexcharts.common.js:14:37913) at t.create (apexcharts.common.js:6:4486)

error
RodolfoRdz11 commented 2 months ago

If you are using react, it was fixed in react-apexcharts@1.4.1

madebywitteveen commented 2 months ago

I have something similar with another property 'map':

apexcharts-card: Error: Cannot read properties of undefined (reading 'map') at eval (eval at _generateData (apexcharts-card.js?hacstag=331701152204:835:42497), :3:46) at Ia._generateData (apexcharts-card.js?hacstag=331701152204:835:42598) at Ia._updateHistory (apexcharts-card.js?hacstag=331701152204:835:38894) at apexcharts-card.js?hacstag=331701152204:908:3531 at Array.map () at tr._updateData (apexcharts-card.js?hacstag=331701152204:908:3486) at tr._firstDataLoad (apexcharts-card.js?hacstag=331701152204:835:77071) at tr._initialLoad (apexcharts-card.js?hacstag=331701152204:908:3176)

How can I fix this ?

thank, you

DevelopJKong commented 2 months ago

It seems like this issue is still problematic. How can it be resolved?

seniordev-ca commented 1 month ago

I am also getting the same error, in my case I am getting above error on the local as well. Any updates here?

sai12-creator commented 1 month ago

Dondrage to earlier version

seniordev-ca commented 1 month ago

If you are using react, it was fixed in react-apexcharts@1.4.1

@RodolfoRdz11 I am on react-apexcharts@1.4.1, but still have the same error.

seniordev-ca commented 1 month ago

Dondrage to earlier version

@sai12-creator , which version are you on? I am on the latest react-apexcharts@1.4.1 and I am still getting this error. I also tried to use group property to use synchronized charts, but it never works.

sai12-creator commented 1 month ago

3.48

RodolfoRdz11 commented 1 month ago

I'm using React, with the library react-apexcharts. I found a nonsense fix, I have an object defaultChartOptions with all default options, obviuosly. Then I have a useEffect that sets the data in xaxis and yaxis, so I used spread operator to set data like this:

` useEffect(() => { if (!_.isEmpty(areaChartData.graph_data)) { const oppositeMax = getMax([ ...areaChartData.graph_data.series?.[1]?.data, ...areaChartData.graph_data.series?.[2]?.data ], true)

        const oppositeMin = getMin([
            ...areaChartData.graph_data.series?.[1]?.data,
            ...areaChartData.graph_data.series?.[2]?.data
        ])

        setOptions({
            ...options,
            series: areaChartData.graph_data.series.map((serie: any) => ({
                ...serie,
                data: serie.data.map((value: number) => value.toFixed(2))
            })),
            xaxis: {
                ...options.xaxis,
                categories: areaChartData.graph_data.categories.map((category: string) => parseInt(category))
            },
            yaxis: [{
                ...options?.yaxis?.[0],
                min: getMin(areaChartData.graph_data.series?.[0]?.data),
                max: getMax(areaChartData.graph_data.series?.[0]?.data),
            }, {
                ...options?.yaxis?.[1],
                min: oppositeMin,
                max: oppositeMax,
            }, {
                ...options?.yaxis?.[2],
                min: oppositeMin,
                max: oppositeMax,
            }]
        })
    }
}, [areaChartData])`

The bug was caused by the yaxis attribute (I tried removing every attribute to find out what was causing the error), then I tried set the yaxis directly without spread operator and the error no longer appeared

` useEffect(() => { if (!_.isEmpty(areaChartData.graph_data)) { const oppositeMax = getMax([ ...areaChartData.graph_data.series?.[1]?.data, ...areaChartData.graph_data.series?.[2]?.data ], true)

        const oppositeMin = getMin([
            ...areaChartData.graph_data.series?.[1]?.data,
            ...areaChartData.graph_data.series?.[2]?.data
        ])

        setOptions({
            ...options,
            series: areaChartData.graph_data.series.map((serie: any) => ({
                ...serie,
                data: serie.data.map((value: number) => value.toFixed(2))
            })),
            xaxis: {
                ...options.xaxis,
                categories: areaChartData.graph_data.categories.map((category: string) => parseInt(category))
            },
            yaxis: [{
                title: {
                    text: 'Monto',
                    offsetY: -150,
                    offsetX: 35,
                    rotate: 360,
                    style: {
                        fontFamily: fontFamilies,
                        fontWeight: 500,
                        color: '#8892A0',
                        fontSize: '12px'
                    }
                },
                show: true,
                labels: {
                    formatter: (val: number, opts?: any) => nFormatter(val, 1),
                    offsetX: -45,
                    style: {
                        fontFamily: fontFamilies,
                        fontWeight: 600,
                        fontSize: '14px',
                        colors: '#242C37'
                    }
                },
                min: getMin(areaChartData.graph_data.series?.[0]?.data),
                max: getMax(areaChartData.graph_data.series?.[0]?.data),
            }, {
                opposite: true,
                title: {
                    text: '',
                    offsetY: 0,
                    offsetX: 0,
                    style: {
                        fontFamily: fontFamilies,
                        fontWeight: 500,
                        color: '#8892A0',
                        fontSize: '12px'
                    }
                },

                show: true,
                labels: {
                    formatter: (val: number, opts?: any) => nFormatter(val, 1),
                    offsetX: -15,
                    style: {
                        fontFamily: fontFamilies,
                        fontWeight: 600,
                        fontSize: '14px',
                        colors: '#242C37'
                    }
                },
                min: oppositeMin,
                max: oppositeMax,
            }, {
                opposite: true,
                show: false,
                min: oppositeMin,
                max: oppositeMax,
            }]
        })
    }
}, [areaChartData])`
jutdinh commented 1 month ago

any solutions?

madebywitteveen commented 1 month ago

The error on my side was with the nordpool integration but have no time yet to investigate

thanks

From: Huynh Ngoc Dinh @.> Sent: zondag 21 juli 2024 15:40 To: apexcharts/react-apexcharts @.> Cc: madebywitteveen @.>; Comment @.> Subject: Re: [apexcharts/react-apexcharts] apexcharts.common.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'group') (Issue #598)

any solutions?

— Reply to this email directly, view it on GitHub https://github.com/apexcharts/react-apexcharts/issues/598#issuecomment-2241615146 , or unsubscribe https://github.com/notifications/unsubscribe-auth/APEZVYVMIMIBU46JBK44VHDZNO2ZZAVCNFSM6AAAAABGZGFXXWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENBRGYYTKMJUGY . You are receiving this because you commented. https://github.com/notifications/beacon/APEZVYQDQDJNXOA3EE4D3BLZNO2ZZA5CNFSM6AAAAABGZGFXXWWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTUFTRKSU.gif Message ID: @. @.> >

pedroeckel commented 3 weeks ago

The same error here. Any solution?

madebywitteveen commented 3 weeks ago

Nope, no solution yet. Thanks 

From: Pedro Eckel @.***> Sent: Thursday, August 1, 2024 17:19 To: apexcharts/react-apexcharts Cc: madebywitteveen; Comment Subject: Re: [apexcharts/react-apexcharts] apexcharts.common.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'group') (Issue #598)

The same error here. Any solution? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

JackSacali commented 2 weeks ago

I have a similar issue using react and apexcharts, I solved it using cloneDeep from lodash to pass the series array:

const chartOptions: ApexOptions = {
  series: cloneDeep(series),
  ...otherOptions,
};
madebywitteveen commented 2 weeks ago

Thanks 👍 

From: Jack Sacali @.***> Sent: Tuesday, August 6, 2024 13:57 To: apexcharts/react-apexcharts Cc: madebywitteveen; Comment Subject: Re: [apexcharts/react-apexcharts] apexcharts.common.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'group') (Issue #598)

I have a similar issue using react and apexcharts, I solved it using cloneDeep from lodash to pass the series array:

const chartOptions: ApexOptions = { series: cloneDeep(series), ...otherOptions, };

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>