apexcharts / vue3-apexcharts

📊 Vue-3 component for ApexCharts
MIT License
314 stars 35 forks source link

`updateOptions` forget other properties when called? #126

Open cnicodeme opened 1 month ago

cnicodeme commented 1 month ago

Hi team

I'm setting up my charts the following way:

<template>
    <div class="app">
        <apexchart ref="myChart" :options="{ chart: { type: 'line' } }" :series="[]"></apexchart>
    </div>
</template>

<script>
export default {
    created () {
        this.loadData ()
    },
    mounted () {
        this.$refs.myChart.updateOptions({ ... all the properties goes here })
    },
    methods: {
        loadData () {
            const data = $fetch('...')
            const series = this.buildSeries(data)
            const categories = this.buildCategories(data)
            const colors = this.buildColors(data)
            const max = this.getMaxFromSeries(series)
            this.$refs.myChart.updateOptions({
                xaxis: { categories },
                yaxis: {
                    max: Math.ceil(max + (max * 0.1)) // Set the yaxis max to the highest value + 10%:
                },
                colors,
                series
            })
        }
    }
}
</script>

Oddly, when I do this that way, all my properties set on the mounted function are lost, such as setting the "min" value to the yaxis, yaxis:labels:formatted, etc.

Why is that? The documentation says that calling updateOptions will keep the existing options and update only the changed one, why is that not occurring here ?