[Vuejs]-How to update data to pie chart using vue-apexcharts

by

0👍

Here is my understanding on doing, …

first you have to define the data and option values of chart.

components: {
    apexchart: VueApexCharts,
  },
  data: {
    series: [],
    chartOptions: {
      chart: {
        width: 380,
        type: "pie",
      },
      labels: [],
      responsive: [
        {
          breakpoint: 480,
          options: {
            chart: {
              width: 200,
            },
            legend: {
              position: "bottom",
            },
          },
        },
      ],
    },
  },

Now on mount you have call your api to get the data and update the chart information. like this …
I’m thinking of you server would return an array of objects having value and key.

 mounted() {
    axios.get("/data/episodes.json").then((response) => {
      for (let i = 0; i < response.data.length; i++) {
        this.data.series.push(response.data[i].value);
        this.data.chartOptions.labels.push(response.data[i].key);
      }
    });
  },

Finally, you have to add the chart component to the vue template. like this.

<div id="chart">
    <apexchart type="pie" width="380" :options="chartOptions" :series="series"></apexchart>
</div>

Done,

Ask me if it is not clear for you.

Leave a comment