apexcharts / vue3-apexcharts

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

series is not update when global state is changed #39

Closed Gartleypattern closed 3 months ago

Gartleypattern commented 2 years ago

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'
        }
    },
}

}

kumarravisingh commented 1 year ago

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.

github-actions[bot] commented 3 months ago

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.