<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 ?
Hi team
I'm setting up my charts the following way:
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 ?