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 <#598 (comment)> , 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: ***@***.***>