Line Chart Vue Chart

// buat file di folder plugins/vue-chart.js
// isinya

import Vue from 'vue'

import 'chart.js/dist/Chart.bundle.min.js'
import VueCharts from 'vue-chartjs'

Vue.use(VueCharts)

// template per komponent chartjs
// buat file di components/linechart.vue
isinya

<script>
import { Line } from 'vue-chartjs'
export default {
  extends: Line,
  props: ['data', 'options'],
  mounted () {
    this.renderChart(this.data, this.options)
  }
}
</script>

// cara pake di html
<linechart :data="linecollection"/>

// di <script vue>
import linechart from '@/components/linechart

// di dalem method data
data () {
    return {
      linecollection: {
        labels: ['Label 0', 'Label 1', 'Label 2'],
        datasets: [
          {
            label: 'Data One',
            borderColor: 'rgba(50, 115, 220, 0.5)',
            backgroundColor: 'rgba(50, 115, 220, 0.1)',
            data: [33, 55, 44]
          },
          {
            label: 'Data Two',
            borderColor: 'rgba(220, 55, 115, 0.1)',
            backgroundColor: 'rgba(220, 55, 115, 0.5)',
            data: [44, 33, 55]
          }
        ]
      }
}