Vue Chart

chart.js

Commands:
// initialize a new vue project
vue init webpack chart

// install dependencies
cd chart && yarn install

// install the chart libraries
 yarn add vue-chartjs chart.js

// create your component named BarChart.js
import { Bar } from 'vue-chartjs'

export default Bar.extend({
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
    })
  }
})

// use it in your HelloWorld.vue
<template>
  <div class="hello">
    <bar-chart></bar-chart>
  </div>
</template>

<script>
  import BarChart from './BarChart'

  export default {
    name: 'HelloWorld',
    
    data(){
      return {
        
      }
    },
    
    components: { BarChart }
  }
</script>