chart.vue

<template>
  <canvas :id="chartId"></canvas>
</template>

<script>
// Third libs
import Chart from 'chart.js';
// Quasar utils
// Quasar Components
// App Components
export default {
  name: 'Chart',
  props: ['chartData', 'chartId', 'type'],
  data () {
    return {
      chartCanva: null,
      chart: null,
      defaultOptions: null
    }
  },
  created () {
    this.defaultOptions = {
      responsive: true,
      animation: {
        easing: "easeInOutBack",
        onProgress: () => { this.$emit('animationProgress') },
        onComplete: () => { this.$emit('animationComplete') }
      },
      maintainAspectRatio: false,
      scales: {
        yAxes: [{
          ticks: {
            padding: 5,
          }
        }],
        xAxes: [{
          ticks: {
            padding: 5,
          }
        }]
      }
    }
  },
  mounted () {
    this.chartCanva = document.getElementById(this.chartId);
    const data = {
      labels: this.chartData.labels,
      datasets: []
    };
    data.datasets = this.chartData.dataSet.map(data => {
      // data.cubicInterpolationMode = 'monotone';
      var gradientStroke = this.chartCanva.getContext('2d').createLinearGradient(0, 230, 0, 50);
      var c1 = `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},0.8)`;
      var c2 = `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},0.2)`;
      gradientStroke.addColorStop(1, c1);
      gradientStroke.addColorStop(0, c2); //blue colors
      data.backgroundColor = gradientStroke;
      return data;
    });
    this.chart = new Chart(this.chartCanva, {
      ...(this.type && {type: this.type}),
      data: data,
      options: this.defaultOptions
    });
    console.log('CHART = ', this.chart);
  },
  watch: {
    chartData: {
      handler (val) {
        val.dataSet.map(data => {
          data.cubicInterpolationMode = 'monotone';
          var gradientStroke = this.chartCanva.getContext('2d').createLinearGradient(0, 230, 0, 50);
          var c1 = `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},0.8)`;
          var c2 = `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},0.2)`;
          gradientStroke.addColorStop(1, c1);
          gradientStroke.addColorStop(0, c2); //blue colors
          data.backgroundColor = gradientStroke;
          return data;
        });
        this.chart = new Chart(this.chartCanva, {
          data: val,
          options: this.defaultOptions
        });
      },
      deep: true
    }
  }
};
</script>

<style lang="stylus" scoped>
</style>