React v18 support

[c-ctkd]

i was changing my project to use react v18, i alsu use react-apexcharts and it works the intended way almos all the time, except if you want to change state on the events handler. On previous react versions changing the state inside a setTimeout will solve this issue, but on v18 the error shows regardless of using transitions (concurrent react) or useTimeout, this is likely due to the changes to make react concurrent, are there any plans on supporting react 18 or a workaround this error?

here are the options that i use:

<Chart
            id={chartId}
            height={height}
            type={'bar'}
            series={esBarData?.data || []}
            options={{
                grid:{
                    show: true,
                    strokeDashArray: 10,
                },
                chart: {
                    id: chartId,
                    height: height - 100,
                    stacked: true,
                    animations: {
                        enabled: false
                    },
                    events: {
                        dataPointSelection: (event, chartContext, config) => {
                            const idx = config.seriesIndex === undefined? 0 : config.seriesIndex
                            setTimeout(() => {
                                    setValueToFilter(config.w.config.series[idx].name)
                                    setFilterModalOpen(true)
                                }, 0)
                        }
                    },
                },
                colors: [({ value, seriesIndex, w } : any) => {
                    if(esBarData === undefined || esBarData.data === undefined){
                        return '#000000'
                    }
                    //REWORK THIS (MJOLNIR ALERT 🔨!) if it the index exceeds the index range of the color array
                    //divides the index value by the color array lenght, then multiply the value times the color array lenght
                    // and thus cycling through the array of colors
                    let colorIdx = seriesIndex
                    if(seriesIndex > colorRef.length - 1){
                        const multFactor = Math.floor(seriesIndex / colorRef.length)
                        const unitValue = seriesIndex - (colorRef.length * multFactor)
                        colorIdx = unitValue
                    }
                    return colorRef[colorIdx]
                 }],
                plotOptions: {
                    bar: {
                      horizontal: false,
                      columnWidth: '40%'
                      //rangeBarGroupRows: true,
                    },
                },
                xaxis: {
                    type: 'datetime',
                },
                tooltip:{
                    enabled: true,
                    x:{
                        show: true,
                    }
                },
                dataLabels: {
                    enabled: false
                },
                legend:{
                    show: true,
                    fontFamily: lightTheme.typography.fontFamily,
                    fontWeight: lightTheme.typography.fontWeightMedium,
                    fontSize: lightTheme.typography.caption.fontSize?.toString(),
                    markers: {
                        radius:100
                        //fillColors: getFillColors()
                    },
                    showForSingleSeries: true
                },
                noData:{
                    text: t('userPortal.charts.noData')
                }
            }}
/>

[Allirix]

Is there an update on v18 support? I can't find what version Apex currently supports

[eliasbaixas]

Please, add support for react 18

[MrVibe]

2024 still apexcharts not compatible with react18 , we're migrating to something else.

[junedchhipa]

I am unable to reproduce the original issue. Can anyone provide a working CodeSandbox example?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.