[Vuejs]-Vue-chartjs how to load data

by

0👍

✅

If you want the data to change on the fly, you either need the reactiveMixin http://vue-chartjs.org/#/home?id=reactive-data

Or you have to trigger an chart update by yourself.

This is because, even Vue.js is reactive, Chart.js per se is not.

If you want to update your chart, simply add a watcher to your LineChart.js component and watch for changes in chart. And then call .update()

import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props:['chart']
  watch: {
    chart () {
      this.$data._chart.update()
    }
  }
  mounted () {
      this.renderChart({
        labels: ['1','2','3','4','5','6','7'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#F64A32',
            data: this.chart
          }
        ]
      }, {responsive: true, maintainAspectRatio: false})
    }
}

Leave a comment