Possible Unhandled Promise Rejection: TypeError: Cannot read property 'type' of undefined

[happyDemon]

After updating my series (amount of series changed from 7 to 3) Fill.getFillColors tries to load the series with index '3', which doesn't exist anymore.

This happens on a bar chart

<template>
<apexchart width="100%" type="bar" height="350px" :options="graph.options" :series="grapSeries"></apexchart>
</template>

<script>
    export default {
        data () {
            return {
                graph: {
                    options: {
                        chart: {
                            id: 'vuechart-example',
                            background: '#fff',
                            brush: {
                                autoScaleYaxis: true,
                            },
                            stacked: true,
                        },
                        plotOptions: {
                            bar: {
                                columnWidth: '30%',
                                distributed: true
                            }
                        },
                        xaxis: {
                            categories: ['maa', 'din', 'woe', 'don', 'vri', 'zat', 'zon']
                        },
                        tooltip: {
                            custom: ({seriesIndex, dataPointIndex}) => {
                                const serie = this.graph.series[seriesIndex];
                                return `<div class="apexcharts-tooltip-series-group active" style="display: flex;"><div class="apexcharts-tooltip-text"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-label">${serie.name}: </span><span class="apexcharts-tooltip-text-value">${serie.time[dataPointIndex]}</span></div><div class="apexcharts-tooltip-z-group"><span class="apexcharts-tooltip-text-z-label"></span><span class="apexcharts-tooltip-text-z-value"></span></div></div></div>`;
                            }
                        }
                        colors: [({value, seriesIndex, w}) => {
                            if (typeof this.grapSeries[seriesIndex] === 'undefined') return '#000000';
                            return this.grapSeries[seriesIndex].color;
                        }]
                    }
                },
            }
        },
        computed: {
            grapSeries() {
                return this.$store.getters['reports/graph'];
            },
        },
    }
</script>

And every series looks like this:

{"name":"Visuals","client":"Cravat","color":"#999999","type":"column","data":[0,7,0,0,0,0,0],"time":["00:00:00","07:00:00","00:00:00","00:00:00","00:00:00","00:00:00","00:00:00"]}

[happyDemon]

@junedchhipa do you have an idea?

[junedchhipa]

Please create a working codesandbox example - https://codesandbox.io/s/pwwz8009n0

[saranyailla]

I have the same issue. But when I use type:'datetime' in the xaxis option, it does not show up.

But my xaxis is not a timeseries. Any workaround found yet?

[mtfash]

I have the same issue when re-rendering the charts. I can get rid of the error if I first remove the chart and render it again like this:

 document.getElementById('chart').innerHTML = '';
 var chart = new ApexCharts(
 document.querySelector("#chart"),
       options
 );

 chart.render();

[zhangjia]

重新绘制图表时，我遇到相同的问题。如果先删除图表并再次渲染，就可以摆脱错误：

 document.getElementById('chart').innerHTML = '';
 var chart = new ApexCharts(
 document.querySelector("#chart"),
       options
 );

 chart.render();

This Perfectly solved my problem, Thanks a lot!

[DanielFerszt]

Any updates on this? I have the problem only when I run a test in a react component that contains the chart.

[orkhi]

This happened for me when I had a null value in xaxis.

[lordjack]

If you use ApexCharts with Laravel, https://larapex-charts.netlify.app

php artisan optimize for me working Clear all cache in the application

[chadrackkyungu]

I fixed the issue by simple check if the array is undefined then return empty if not return the chart with my values data: salary[0] === undefined ? [] : salary