<template>
  <div class="example">
    <apexchart ref="donut" width="350" type="donut" :options="chartOptions" :series="series"></apexchart>

  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)

Vue.component('apexchart', VueApexCharts)
export default {
  name: 'DonutDataBundles',
  data: function() {
    return {
      chartOptions: {
        labels: ["February", "March", "April", "May", "June", "July", "May"],
       
      // labels: this.categories,
      },
     //  series: [3, 4, 1640, 5],
      series: [],
    }
  },
  methods: {
    getGroups: function(){
  axios.get('/at/databundleschartdonut/get')
  .then((response) => {
    this.series.total_units = response.data;
    console.log(this.series,'yyyyyyyyyyyyyyyy'); // check if series data is being updated

    this.series = response.data.map(item => item.total_units);
    this.categories = response.data.map(item => item.month_name);

      this.series = series;
      this.categories = categories;
      this.chartOptions.xAxis.categories = months;
      console.log(this.chartOptions.xAxis.categories,'ffffffffffffffffffffd')
      this.chartOptions.series = series;

  })
},

  },
  created: function(){
      this.getGroups()
      }
}
</script>
