<div class="app">
	<h1>Line Chart</h1>
	<line-chart></line-chart>
</div>

Vue.component('line-chart', {
  extends: VueChartJs.Line,
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})
  }
  
})

var vm = new Vue({
  el: '.app',
  data: {
    message: 'Hello World'
  }
})
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css

External JavaScript

  1. https://unpkg.com/vue
  2. https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js
  3. https://unpkg.com/vue-chartjs@3.4.0/dist/vue-chartjs.js