pcpuma_unam_operador/plugins/chart.js

import Vue from 'vue'
import { Bar, Doughnut, Line } from 'vue-chartjs'

Vue.component('BarChart', {
  extends: Bar,
  props: {
    data: { type: Object, required: true },
    options: {
      type: Object,
      required: false,
      default: () => ({
        responsive: true,
        maintainAspectRatio: false,
        legend: { display: true },
      }),
    },
  },
  watch: {
    data() {
      this.renderChart(this.data, this.options)
    },
  },
  mounted() {
    this.renderChart(this.data, this.options)
  },
})

Vue.component('LineChart', {
  extends: Line,
  props: {
    data: { type: Object, required: true },
    options: {
      type: Object,
      required: false,
      default: () => ({
        responsive: true,
        maintainAspectRatio: false,
        legend: { display: true },
      }),
    },
  },
  watch: {
    data() {
      this.renderChart(this.data, this.options)
    },
  },
  mounted() {
    this.renderChart(this.data, this.options)
  },
})

Vue.component('DoughnutChart', {
  extends: Doughnut,
  props: {
    data: { type: Object, required: true },
    options: {
      type: Object,
      required: false,
      default: () => ({
        responsive: true,
        maintainAspectRatio: false,
        legend: { display: true },
      }),
    },
  },
  watch: {
    data() {
      this.renderChart(this.data, this.options)
    },
  },
  mounted() {
    this.renderChart(this.data, this.options)
  },
})