[Vuejs]-Vue.JS, Axios, CanvasJS – get data from API and populate / render a chart

0👍

The solution from Edit 1 is a bit “hacky” in the sense that Vue will not wait for promises to resolve before continuing the component lifecycle. It may work, but it doesn’t seem like Vue way to do things.

I don’t know your use case, but it seems like you can keep this very simple.

data () {
  return {
    chart: null
  }
},
mounted () {
  axios.get('/api/temps')
    .then((response) => {
      let chartOptions = {
        ...
        data: response.data,
        ...
      }

      this.chart = new CanvasJS.Chart("chartContainer", chartOptions);
      this.chart.render();
    })
    .catch((error) => { console.log(error) })
}

Leave a comment