How to get chart data from REST GET to appear during initialisation for this vue component?

Question

I modified an apexcharts Vue component BarChart.vue which is from https://github.com/apexcharts/vue3-apexcharts

I want to retrieve chart data by consuming a REST GET API and insert data into series.

The script portion of this component is as follows;

<script>
/* eslint-disable */

export default {
  name: "BarExample",
  data: dataInitialisation,
  methods: {
    updateChart,
  },
};

async function makeGetRequest(url) {
  const axios = require("axios");
  //let res = await axios.get("http://localhost:8080/vue3-apexcharts/data.json");
  let res = await axios.get(url);

  return res.data;
}

function dataInitialisation() {
  let init_data = {
    chartOptions: {
      chart: {
        type: "bar",
        stacked: true,
        animations: {
          enabled: true, //disabling will speed up loading
        },
      },
    },
    series: {},
  };

  var url = "http://localhost:8080/vue3-apexcharts/data.json";
  const axios = require("axios");

  var data;

  makeGetRequest(url).then( 
                        (data) => 
                        {
                            console.log(JSON.stringify(data));
                            init_data.series = data;
                        }
                     );

  return init_data;
}

I verified that there is nothing wrong with the code for getting the data from REST GET by printing out the data using console.log().

I did some research and it seems I need to use mounted() to get the data to appear on the chart. If this is correct, how do I modify the code to use mounted() to do so?

I am using vue 3.

Answer 1

I will answer my own question. The key to the answer comes from the mounted event available in the vue-apexcharts library.

https://apexcharts.com/docs/options/chart/events/

I used this article here as a guide on how to use events in vue3-apexcharts.

https://kim-jangwook.medium.com/how-to-use-events-on-vue3-apexcharts-2d76928f4abc

<template>
  <div class="example">
    <apexchart
      width="500"
      height="350"
      type="bar"
      :options="chartOptions"
      :series="series"
      @mounted="mounted"
    ></apexchart>
  </div>
</template>

<script>
async function makeGetRequest(url) {
  const axios = require("axios");
  //let res = await axios.get("http://localhost:8080/vue3-apexcharts/data.json");
  let res = await axios.get(url);

  return res.data;
}

export default {
  name: "BarExample",
  data: dataInitialisation,
  methods: {
    updateChart,
    mounted: function(event, chartContext, config) {        
        console.log("mount event");
        var url = "http://localhost:8080/vue3-apexcharts/data.json";
        const axios = require("axios");

        var data;

        makeGetRequest(url).then((data) => {              
          this.series = data;
        });
    },
  },
};
</script>