Error: <path> attribute d: Expected number, "M N aN 331.9444999…" in vue apex bar chart

[HammdMaqsood]

I am using vue apex chart and it is working except whenc you give 0 in data series then it gives the following error in the console Error: attribute d: Expected number, "M N aN 331.9444999… Here is my code

<VueApexCharts ref="chart" type="bar" height="400" :options="option" :series="series"

series: [ { name: this.name, data: [], }, ], option: { chart: { height: 400, type: 'bar', fontFamily: 'Roboto, sans-serif', }, plotOptions: { bar: { borderRadius: 9, columnWidth: '20px', dataLabels: { position: 'top', // top, center, bottom }, }, }, colors: [this.color], dataLabels: { enabled: true, formatter: function (val) { return val }, offsetY: -20, style: { fontSize: '0', colors: ['#5BCDF8'], }, }, xaxis: { categories: [ 'Jan1', 'Jan2', 'Jan3', 'Jan4', 'Jan5', 'Jan6', 'Jan7', ], position: 'bottom', axisBorder: { show: false, }, axisTicks: { show: false, }, crosshairs: { fill: { type: 'gradient', gradient: { colorFrom: '#5BCDF8', colorTo: '#5BCDF8', stops: [0, 100], opacityFrom: 0.4, opacityTo: 0.5, }, }, }, tooltip: { enabled: true, }, }, yaxis: { axisBorder: { show: false, },

                axisTicks: {
                    show: false,
                },
                labels: {
                    show: false,
                    formatter: function (val) {
                        return val
                    },
                },
            },
            grid: {
                show: true,
                borderColor: '#E2E2E2',
                strokeDashArray: 8,
                position: 'back',
                yaxis: {
                    lines: {
                        show: true,
                        borderColor: '#90A4AE',
                    },
                },
                row: {
                    colors: undefined,
                    opacity: 0.5,
                },
                column: {
                    colors: undefined,
                    opacity: 0.5,
                },
                padding: {
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                },
            },
            responsive: [
                {
                    breakpoint: 1500,
                    options: {
                        plotOptions: {
                            bar: {
                                borderRadius: 6,
                            },
                        },
                    },
                },
                {
                    breakpoint: 767,
                    options: {
                        chart: {
                            height: 200,
                        },
                        plotOptions: {
                            bar: {
                                borderRadius: 5,
                            },
                        },
                    },
                },
            ],
        },

            this.series = [{ data: {1,2,3,4,0,5,7 }]

[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.