graficas highcharts

APP/components/Charts/PieChart.js

@@ -0,0 +1,59 @@
+import { Pie, mixins } from 'vue-chartjs';
+
+export default {
+  name: 'pie-chart',
+  extends: Pie,
+  mixins: [mixins.reactiveProp],
+  props: {
+    extraOptions: Object,
+    gradientColors: {
+      type: Array,
+      default: () => [
+        'rgba(72,72,176,0.2)',
+        'rgba(72,72,176,0.1)',
+        'rgba(119,52,169,0)'
+      ],
+      validator: val => {
+        return val.length > 1;
+      }
+    },
+    gradientStops: {
+      type: Array,
+      default: () => [1, 0.4, 0],
+      validator: val => {
+        return val.length > 1;
+      }
+    }
+  },
+  data() {
+    return {
+      ctx: null
+    };
+  },
+  methods: {
+    updateGradients(chartData) {
+      if (!chartData) return;
+      const ctx =
+        this.ctx || document.getElementById(this.chartId).getContext('2d');
+       const colors=["0xFF0000","0xFFFF00"]
+     
+      chartData.datasets.forEach(set => {
+        if (!set.backgroundColor) {
+           set.backgroundColor = "rgba(119,52,169,1)";
+        }
+      });
+    }
+  },
+  mounted() {
+    this.$watch(
+      'chartData',
+      (newVal, oldVal) => {
+        this.updateGradients(newVal);
+        if (!oldVal) {
+          this.renderChart(this.chartData, this.extraOptions);
+        }
+      },
+      { immediate: true }
+    );
+  }
+};