barChart.js

Vue.component('my-bar-chart', {
    extends: VueChartJs.Bar,
    props: ['barData', 'chartOptions'],
    mounted: function () {
        this.renderChart(this.barData, this.chartOptions);
    }
})

chart.html

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
<link rel="stylesheet" type="text/css"
  href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@2.0.10/dist/vuetify.min.css" />
<link rel="stylesheet" type="text/css"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />

<script src="https://cdn.jsdelivr.net/npm/babel-regenerator-runtime@6.5.0/runtime.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.10/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs@3.4.0/dist/vue-chartjs.js"></script>
<style>
  /*Hide quick launch*/
  #sideNavBox {
    DISPLAY: none
  }

  #contentBox {
    MARGIN-LEFT: 5px
  }

  div#s4-titlerow {
    DISPLAY: none !important;
  }
</style>
<div id="app">
  <v-app id="inspire">
    <v-app-bar app dense color="indigo darken-1" clipped-left>
      <v-app-bar-nav-icon color="white" @click="drawer = !drawer"></v-app-bar-nav-icon>

      <v-toolbar-title class="white--text">Title</v-toolbar-title>

      <v-btn icon>
        <v-icon color="white">search</v-icon>
      </v-btn>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon color="white">favorite</v-icon>
      </v-btn>
      <v-btn v-on:click="push">
        <v-icon>fab fa-angellist</v-icon>
      </v-btn>
      <v-btn icon color="white">
        <v-icon>more_vert</v-icon>
      </v-btn>
    </v-app-bar>
    </v-card>

    <v-navigation-drawer app v-model="drawer" clipped>
      <v-list dense rounded>
        <v-list-item v-for="item in items" :key="item.title" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-content>
      <v-container class="grey lighten-5" fluid>
        <v-row dense>
          <v-col cols="sm">
            <v-card class="pa-2" outlined tile raised>
              <my-line-chart :line-data="ChartConfig" :chart-options="options"></my-line-chart>
            </v-card>
          </v-col>
          <v-col cols="sm">
            <v-card class="pa-2" outlined tile raised>
              <my-bar-chart :bar-data="ChartConfig" :chart-options="options"></my-bar-chart>
            </v-card>
          </v-col>
        </v-row>
        <v-row no-gutters>
          <v-col cols="sm">
            <v-card class="pa-2" outlined tile raised>
              One of three columns
            </v-card>
          </v-col>
        </v-row>

      </v-container>
    </v-content>

  </v-app>

</div>

<script type="text/javascript" src="/sites/demos/mdemos/webpart/toolbar/v-components/barChart.js"></script>
<script type="text/javascript" src="/sites/demos/mdemos/webpart/toolbar/v-components/lineChart.js"></script>
<script type="text/javascript" src="/sites/demos/mdemos/webpart/toolbar/chart.js"></script>

chart.js

document.getElementById("RibbonContainer").style.display = "none";
document.getElementById("s4-ribbonrow").style.display = "none";
document.getElementById("suiteBarTop").style.display = "none";
document.getElementById("DeltaSiteLogo").style.display = "none";
document.querySelector("[title=toolbar").style.display = "none";

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
    ChartConfig: {
      labels: [],
      datasets: [
        {
          data: [],
          backgroundColor: '#3498db',
          borderColor: 'rgba(136,136,136,0.5)',
          label: "2013"
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      title: {
        display: true,
        text: 'Chart.js Line Chart'
      },
      tooltips: {
        mode: 'index',
        intersect: false,
      },
      hover: {
        mode: 'nearest',
        intersect: true
      },
      scales: {
        xAxes: [{
          display: true,
          categoryPercentage: 0.5,
          scaleLabel: {
            display: true,
            labelString: 'Month'
          }
        }],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Value'
          }
        }]
      }
    },
    items: [
      { title: "Dashboard", icon: "mdi-view-dashboard" },
      { title: "Admin", icon: "mdi-image" },
      { title: "About", icon: "mdi-help-box" }
    ],
    iceCream: [],
    drawer: false
  },
  created: function () {
    this.getListData();
  },
  methods: {
    getListData: function () {
      var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('popular ice cream')/items";

      this.status = "getting data...";
      var that = this;
      axios.get(endPointUrl).then(function (response) {
        //console.log(response.data.value)
        that.getChartData(response.data.value);
      })
        .catch(function (error) {
          console.log(error);
        })
    },
    push: function () {
      alert("Peace to all!! do something");
    },
    getChartData: function (chartData) {
      console.log(chartData);
      for (var i = 0; i < chartData.length; i++) {
        this.ChartConfig.labels.push(chartData[i].Flavor)
      }

      for (var i = 0; i < chartData.length; i++) {
        this.ChartConfig.datasets[0].data.push(chartData[i].Vote)
      }
    }
  }
});

lineChart.js

Vue.component('my-line-chart', {
    extends: VueChartJs.Line,
    props: ['lineData', 'chartOptions'],
    mounted: function () {
        this.renderChart(this.lineData, this.chartOptions);
    }
})