UpdateOptions() method leads to an error [vue-apexcharts]

user_2590810 0
Viewed 1646

Nuxt

plugins\apexCharts.js

import Vue from 'vue';
import VueApexCharts from 'vue-apexcharts';

Vue.use(VueApexCharts);
Vue.component('ApexChart', VueApexCharts);

nuxt.config.js

    plugins: [
        { src: '~/plugins/apexCharts.js', ssr: false },
    ],

component

<template>
    <ApexChart ref="apexChart" height='300px' :type="type" :series="series" :options="options"></ApexChart>
</template>

After trying to update the chart:

        updateChart() {
            this.$refs.apexChart.updateOptions({
                xaxis: {
                    labels: {
                        show: false
                    }
                },
                yaxis: {
                    labels: {
                        show: false
                    }
                }
            });
        }

We receive an error:

TypeError: Cannot read property 'filter' of undefined

Browser console:

TypeError: Cannot read property 'filter' of undefined
    at t.value (apexcharts.min.js:15)
    at t.value (apexcharts.min.js:15)
    at i.value (apexcharts.min.js:6)
    at t.value (apexcharts.min.js:15)
    at VueComponent.updateOptions (vue-apexcharts.js:186)
    at VueComponent.updateChart (index.js?!./node_modules/vue-loader/lib/index.js?!./components/elements/charts/base/apexCharts.vue?vue&type=script&lang=js&:65)
    at invokeWithErrorHandling (vue.runtime.esm.js:1853)
    at Vue.$emit (vue.runtime.esm.js:3882)
    at VueComponent.changeTheme (index.js?!./node_modules/vue-loader/lib/index.js?!./components/header/themes.vue?vue&type=script&lang=js&:33)
    at VueComponent.clickSwitch (index.js?!./node_modules/vue-loader/lib/index.js?!./components/header/themes.vue?vue&type=script&lang=js&:22)
apexcharts nuxt.js
2 Answers

The problem has been resolved. The mistake was on my side.

Here is a working example:

<template>
    <div v-if="showChart">
        <apexchart width="500" type="bar" :options="chartOptions" :series="series"></apexchart>
        <button @click="getData()">Update</button>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            showChart: false,
            chartOptions: {
                chart: {
                    id: 'vuechart-example'
                },
                xaxis: {
                    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
                }
            },
            series: [{
                name: 'series-1',
                data: [30, 40, 35, 50, 49, 60, 70, 91]
            }]
        }
    },
    mounted() {
        this.getData();
        this.showChart = true;
    },
    methods: {
        getData() {
            let total = 6;
            let startYears = this.random(2000, 2025);
            let series = [];
            let categories = [];
            for (let i = 0; i < total; i++) {
                series.push(this.random(200, 500));
                categories.push(startYears++);
            }
            let index = this.random(0, 2);
            let colors = ['#ff0000', '#00ff00', '#0000ff'];

            this.series = [{
                data: series
            }];
            this.chartOptions = {
                chart: {
                    foreColor: colors[index]
                },
                xaxis: {
                    categories: categories
                }
            };
        },
        random(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
    }
};
</script>
user_25908100

This works like a charm for me:

<template>
    <div>
        <apexchart ref="table123" width="500" type="bar" :options="chartOptions" :series="series"></apexchart>
        <button @click="getData()">Update</button>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            showChart: false,
            chartOptions: {
                chart: {
                    id: 'vuechart-example'
                },
                xaxis: {
                    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
                }
            },
            series: [{
                name: 'series-1',
                data: [30, 40, 35, 50, 49, 60, 70, 91]
            }]
        }
    },
    mounted() {
        this.getData();            
    },
    methods: {
        getData() {
            let total = 6;
            let startYears = this.random(2000, 2025);
            let series = [];
            let categories = [];
            for (let i = 0; i < total; i++) {
                series.push(this.random(200, 500));
                categories.push(startYears++);
            }
            let index = this.random(0, 2);
            let colors = ['#ff0000', '#00ff00', '#0000ff'];

            this.series[0].data = series;
            this.chartOptions.xaxis.categories = categories;
            this.$refs.table123.updateSeries(this.series,true)
            this.$refs.table123.updateOptions(this.chartOptions, false ,true)
        },
        random(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
    }
};
</script>

check other example from

https://github.com/apexcharts/vue-apexcharts/issues/74#issuecomment-472297640

https://codesandbox.io/s/qzl15y1nlj?fontsize=14&file=/src/components/Chart.component.vue:2546-2559

user_72707230
Related