How do I add dynamic data to apexcharts using vue.js?

Question

I am trying to use dynamic data in my donut apexchart, but I don't know the correct way to do it.

I tried setting "test: 5" under data and then change the static number in series: [this.test, 4, 1]. Did not output anything, I am new to programming.

<script>
import VueApexCharts from 'vue-apexcharts'
export default {
name: 'Dashboard',
components: {
apexcharts: VueApexCharts
},
data () {
return {
  test: 6,
  series: [this.test, 5, 4],
  chartOptions: {
    plotOptions: {
      pie: {
        donut: {
          labels: {
            show: true,
            name: {
              fontSize: '24px'
            },
            value: {
              fontSize: '34px',
              color: '#fff'
            }
          }
        }
      }
    },
    tooltip: {
      enabled: false
    },
    legend: {
      show: false
    },
    fill: {
      colors: ['#4b367c', '#2aa5ed', '#db2828']
    },
    dataLabels: {
      enabled: false
    },
    labels: ['Utkast', 'Öppen', 'Förfallen'],
    colors: ['#4b367c', '#2aa5ed', '#db2828']
  }
}
},
mounted () {
this.$store.commit('setPageTitle', { title: 'Översikt' })
}
}
</script>

My goal is to reach in to firebase and use the data from there, but to start with I just wanted to test out how to add any data and failed here already.

Have you tried Props

Pankaj
– Pankaj

2019-02-05 09:20:01 +00:00
Commented Feb 5, 2019 at 9:20 — Pankaj
– Pankaj, Commented Feb 5, 2019 at 9:20

Riddhi · Accepted Answer · 2019-02-05 09:25:56Z

2

You should not use one variable in another directly in data. series: [this.test, 5, 4], This will return null in this.test. You can set series empty intially and set values later. series:[] And then populate series in some function. Or else use computed() as follows:

computed: {
    series() {
        return this.test;
    }
}

answered Feb 5, 2019 at 9:25

Riddhi

2,2541 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bcktr Over a year ago

This is not work. Seems causes series:[] "apexcharts.min.js?3d1e:6 Uncaught (in promise) TypeError: Cannot read property 'data' of undefined"

Dino Sunny · Accepted Answer · 2021-02-19 04:46:55Z

1

You can update the chart data dynamically like this.

this.chartOptions = {labels:['dynamic data here']}
this.series = ['dynamic data here']

answered Feb 19, 2021 at 4:46

Dino Sunny

1,0711 gold badge11 silver badges19 bronze badges

Collectives™ on Stack Overflow

How do I add dynamic data to apexcharts using vue.js?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related