graficas highcharts

APP/components/Charts/BarChart.js

@@ -10,7 +10,7 @@ export default {
       type: Array,
       default: () => [
         'rgba(72,72,176,0.2)',
-        'rgba(72,72,176,0.0)',
+        'rgba(72,72,176,0.1)',
         'rgba(119,52,169,0)'
       ],
       validator: val => {
@@ -35,14 +35,17 @@ export default {
       if (!chartData) return;
       const ctx =
         this.ctx || document.getElementById(this.chartId).getContext('2d');
-      const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
+      const gradientStroke = ctx.createLinearGradient(0, 230, 20, 50);
 
       this.gradientStops.forEach((stop, index) => {
         gradientStroke.addColorStop(stop, this.gradientColors[index]);
       });
 
+ 
+     
       chartData.datasets.forEach(set => {
         if (!set.backgroundColor) {
+          console.log(ctx)
           set.backgroundColor = gradientStroke;
         }
       });

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 }
+    );
+  }
+};

APP/components/Charts/config.js

@@ -342,7 +342,8 @@ export let barChartOptions = {
     xPadding: 12,
     mode: 'nearest',
     intersect: 0,
-    position: 'nearest'
+    position: 'nearest',
+    
   },
   scales: {
     yAxes: [

APP/components/Charts/config_plots.js

@@ -0,0 +1,83 @@
+export var chartOptions = {
+  credits: {
+    enabled: false
+  },
+  chart: {
+    renderTo: "container",
+    defaultSeriesType: "column",
+    backgroundColor: "rgba(0,0,0,0)"
+  },
+
+  xAxis: {
+    categories: [],
+    crosshair: true
+  },
+  yAxis: {
+    title: {
+      text: ""
+    },
+    labels: {
+      style: {
+        color: "#d4d2d2",
+        font: "11px Trebuchet MS, Verdana, sans-serif"
+      }
+    }
+  },
+
+  legend: {
+    itemStyle: {
+      color: "#d4d2d2"
+    }
+  },
+  tooltip: {
+    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
+    pointFormat:
+      '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
+      '<td style="padding:0"><b>{point.y:.0f} pesos</b></td></tr>',
+    footerFormat: "</table>",
+    shared: true,
+    useHTML: true
+  },
+  responsive: {
+    rules: [
+      {
+        condition: {
+          maxWidth: 500
+        },
+        chartOptions: {
+          legend: {
+            layout: "horizontal",
+            align: "center",
+            verticalAlign: "bottom"
+          }
+        }
+      }
+    ]
+  }
+};
+
+export var pieOptions={
+  chart: {
+    renderTo: "container",
+    defaultSeriesType: "pie",
+    backgroundColor: "rgba(0,0,0,0)"
+  },
+  xAxis: {
+    categories: [],
+    crosshair: true
+
+  },
+  credits: {
+    enabled: false
+  },
+  plotOptions: {
+    pie: {
+        allowPointSelect: true,
+        cursor: 'pointer',
+        dataLabels: {
+            enabled: true,
+            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
+        }
+    }
+},
+};