Chartjs not rendering using VUE

Hello,

I am trying to use render a chart.js using vue but, even though the canvas shows but the graphs don’t render. Here’s the code:

<div id="app">
  <canvas id="myChart" width="400" height="400"></canvas>
</div>
new Vue({
  el:"#app",
  data: {
    dataSetData: [],
    expectedFund: '',
    chartDate: '',
    crossOver: '',
    billing: ''
  },
  created: function(){
    this.getDataSet('ExpectedFund');
    this.getDataSet('Billing');
    this.getDataSet('crossOver');
    this.getDataSet('date');
    
    this.getListData();
    
  },
  mounted: function() {
    this.buildChart(this.dataSetData);
  },
  methods: {
    buildChart: function(dataSet){
             //alert("Hello")
      var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: this.chartDate,
        datasets: [{
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            label: 'Expected Fund',
            data: this.expectedFund,
            borderWidth: 1
        },
        {
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            label: 'Billing',
            data: this.billing,
            borderWidth: 1
        },
        {
            backgroundColor: 'rgba(255, 159, 64, 0.2)',
            label: 'Crossover',
            data: this.crossOver,
            borderWidth: 1
        }             
      ]
    },
   options: {
     title: {
       display: true,
       text: 'funded, billing, etc'
     },
     scales: {
       xAxes:[{
         stacked:true,
       }],
       yAxes: [{
         stacked: true
       }]
     }
   }
});
    },
    getDataSet: function(dataField){
      if (dataField == 'ExpectedFund'){
          this.expectedFund = this.dataSetData.map(function(chartData){
            console.log(chartData)
          return chartData.ExpectedFund
        })
      }else if(dataField == 'Billing'){
          this.billing = this.dataSetData.map(function(chartData){
          return chartData.Billing
        })
      }else if(dataField == 'date'){
          this.chartDate = this.dataSetData.map(function(chartData){
          return chartData.date
        })
       }else if (dataField == 'crossOver'){
          this.crossOver = this.dataSetData.map(function(chartData){
          return chartData.crossOver
        })
       }
    },
    getListData: function(){            
            //alert("Get Data");
            var vm = this;
            axios.get('https://my-json-server.typicode.com/isogunro/jsondb/chartData').then(function(response){
                vm.dataSetData = response.data.value;                
            })
            .catch(function(error){
                console.log(error);
            })
            .then(function(){
                console.log("Always executes")
            })
        }
  }
})

https://codepen.io/isogunro/pen/XvxzYO?editors=0010

Thanks for any help you can provide.

You can refer to this example.
https://jsfiddle.net/vqrthmog/

I prefer to wrap the dataset into a module.

export const planetChartData = {
  type: 'line',
  data: {
    labels: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'],
    datasets: [
      {
        label: 'Number of Moons',
        data: [0, 0, 1, 2, 67, 62, 27, 14],
        backgroundColor: [
          'rgba(54,73,93,.5)',
          'rgba(54,73,93,.5)',
          'rgba(54,73,93,.5)',
          'rgba(54,73,93,.5)',
          'rgba(54,73,93,.5)',
          'rgba(54,73,93,.5)',
          'rgba(54,73,93,.5)',
          'rgba(54,73,93,.5)'
        ],
        borderColor: [
          '#36495d',
          '#36495d',
          '#36495d',
          '#36495d',
          '#36495d',
          '#36495d',
          '#36495d',
          '#36495d',
        ],
        borderWidth: 3
      },
      { // another line graph
        label: 'Planet Mass (x1,000 km)',
        data: [4.8, 12.1, 12.7, 6.7, 139.8, 116.4, 50.7, 49.2],
        backgroundColor: [
          'rgba(71, 183,132,.5)', // Green
        ],
        borderColor: [
          '#47b784',
        ],
        borderWidth: 3
      }
    ]
  },
  options: {
    responsive: true,
    lineTension: 1,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          padding: 25,
        }
      }]
    }
  }
}

It works fine for static data but not for data coming in externally. After some digging and research and asking, I have this solution that works. The problem was that the canvas was being drawn before my data was retrieved. Async Await did the trick.

https://codepen.io/isogunro/pen/KOJdGW?editors=0010