vue3-apexcharts
vue3-apexcharts copied to clipboard
series is not update when global state is changed
I've assigned a global state to series.data but is not changed when global state is changed. data() { return { series: [{ name: 'apicalls', data : apiCalls[this.$store.state.currentDay] }], chartOptions: { chart: { zoom: { enabled : false, }, }, fill : { type : 'gradient', colors : "#00FFDC" }, dataLabels : { enabled: false }, stroke : { curve: 'straight', width : .5, },
title : {
// text: 'Fundamental Analysis of Stocks',
// align: 'left'
},
subtitle : {
// text: 'Price Movements',
// align: 'left'
},
labels : [10,20,30,40,50],
xaxis : {
type : 'datetime',
},
yaxis : {
opposite: true
},
legend : {
horizontalAlign: 'right'
}
},
}
}
I was making an API call after which I needed to update the chart so I wrote a function
const updateChart = ()=>{ series.pop() series.push(30) }
It popped the last value from the array and pushed a new value which somehow started updating my chart.
I called this update method from my API response like this:
myStore.someMethod({ }).then(response => { updateChart() }).catch(error => { console.log(error) })
This way it started working, wasted hours in solving this, hope it helps someone.