Chartjs-How to get data from JSON for chart.js, using vue.js

You need to use reactiveData mixin to implement reactivity

var orderChart = Vue.component('order-chart', {
  extends: VueChartJs.Bar,
  mixins: [VueChartJs.mixins.reactiveData]
  mounted () {
    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
  },
  data: function ()  {
    return {
      chartData: {
        labels: [],
        datasets: [
          {
            label: 'cancelled',
            backgroundColor: 'red',
            data: []
          },
          {
            label: 'reserved',
            backgroundColor: 'blue',
            data: []
          },
          {
            label: 'delivered',
            backgroundColor: 'green',
            data: []
          }
        ]
      }
    }
  },
  created: function() {
    fetch('/receive/')    
    .then(res => res.json())
    .then(res => {
      const datasets = [
        {
          label: 'cancelled',
          backgroundColor: 'red',
          data: res.map(item => item.cancelled)
        },
        {
          label: 'reserved',
          backgroundColor: 'blue',
          data: res.map(item => item.reserved)
        },
        {
          label: 'delivered',
          backgroundColor: 'green',
          data: data: res.map(item => item.delivered)
        }
      ]
      this.chartData = {
        datasets: datasets,
        labels: res.map(item => item.orderdate)
      }
    });
  }
})

Demo: https://codepen.io/ittus/pen/MGxQqO