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

Couple of things.

Never define functions and logic outside the Vue api inside a Vue component. What's defined in data , should be defined in data every doc that you will encounter does that the same way.Data Properties and Methods .

Answering your question yes, you need a lifecycle hook for fetching the data from the api when the component mounts, you can read more about lifecycle hooks in this article

// From this line until the end just delete everything.
// Define `methods` and `data` where they belong.
function dataInitialisation() {
  let init_data = {
    chartOptions: {

Here is a refactored example:

<script>
import axios from 'axios'

export default {
  name: 'BarExample',
  data() {
    return {
      url: 'http://localhost:8080/vue3-apexcharts/data.json',
      chartOptions: {
        chart: {
          type: 'bar',
          stacked: true,
          animations: {
            enabled: true
          }
        }
      },
      series: {}
    }
  },
  async mounted() {
    await this.makeGetRequest()
  },
  methods: {
    updateChart, // Where is this method defined?
    async makeGetRequest() {
      const { data } = await axios.get(this.url)
      this.series = data
    }
  }
}
</script>

Answer 2

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>

export default {
  name: "BarExample",
  data: dataInitialisation,
  methods: {
    updateChart,
    click(event, chartContext, config) {    
      console.log('click', event, chartContext, config);
    },    
    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;
        });
    },
  },
};