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

[sai12-creator]

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)

[RodolfoRdz11]

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

[madebywitteveen]

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]

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

[seniordev-ca]

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]

Dondrage to earlier version

[seniordev-ca]

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]

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]

3.48

[RodolfoRdz11]

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]

any solutions?

[madebywitteveen]

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]

The same error here. Any solution?

[madebywitteveen]

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]

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]

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: @.***>

[d0dge]

I'm having this issue too. It doesn't prevent charts from rendering but it does seem to slow down that rendering quite a lot, which isn't great.

[AyushBawane]

one solution that worked for me is, add check on your component's top. check if data is undefined.

if(data === undefined) return ;

u can then may be memoize the component or parent according data change or how u want to render the component.

[leocharrua]

Hello, I had a similar error with angular:

node_modules_apexcharts_dist_apexcharts_common_js.js:2 TypeError: Cannot read properties of null (reading 'hidden') at apexcharts.common.js:14:37898 at Array.forEach () at t.value (apexcharts.common.js:14:37873) at t.create (apexcharts.common.js:6:4908) at apexcharts.common.js:14:37096 at new ZoneAwarePromise (zone.js:2702:25) at t.value (apexcharts.common.js:14:21791) at ng-apexcharts.mjs:113:74 at _ZoneDelegate.invoke (zone.js:369:28) at ZoneImpl.run (zone.js:111:43)

[madebywitteveen]

Ok thanks a lot 😄 

---

From: leocharrua @.***> Sent: Tuesday, October 29, 2024 21:12 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)

Hello, I had a similar error with angular: node_modules_apexcharts_dist_apexcharts_common_js.js:2 TypeError: Cannot read properties of null (reading 'hidden') at apexcharts.common.js:14:37898 at Array.forEach () at t.value (apexcharts.common.js:14:37873) at t.create (apexcharts.common.js:6:4908) at apexcharts.common.js:14:37096 at new ZoneAwarePromise (zone.js:2702:25) at t.value (apexcharts.common.js:14:21791) at ng-apexcharts.mjs:113:74 at _ZoneDelegate.invoke (zone.js:369:28) at ZoneImpl.run (zone.js:111:43) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>