Colores

pages/graph.html

@@ -50,9 +50,10 @@
                     @vue:mounted="createMultiLineGraph($el, datos.snapshots)">
             </div>
             <div class="col-md-8">
-                <div id="calificaciones"
-                    @vue:mounted="createGraph($el, datos.calificaciones.map(calificacion => calificacion.course_name), datos.calificaciones.map(calificacion => calificacion.calificación_final))">
-                </div>
+                <canvas id="calificaciones" width="400" height="400" @vue:mounted="createGraph($el,
+                    datos.calificaciones.map(calificacion => calificacion.course_name),
+                    datos.calificaciones.map(calificacion => calificacion.calificación_final),
+                    'bar', 'Calificaciones')">
             </div>
 
         </div>
@@ -60,8 +61,6 @@
 </main>
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-
 <script>
     const filter = PetiteVue.reactive({
         grupo: null,
@@ -98,9 +97,25 @@
             store.loading = false;
         },
         createGraph($el, labels, data) {
+            const colors = [
+                'rgba(54, 162, 235, 0.7)', // Blue
+                'rgba(255, 99, 132, 0.7)', // Red
+                'rgba(255, 159, 64, 0.7)', // Orange
+                'rgba(255, 206, 86, 0.7)', // Yellow
+                'rgba(75, 192, 192, 0.7)', // Green
+                'rgba(153, 102, 255, 0.7)', // Purple
+                'rgba(201, 203, 207, 0.7)', // gray
+            ]
             var options = {
+                
                 series: [{
-                    data: data
+                    data: data.map((d, index) => {
+                        return {
+                            x: labels[index],
+                            y: d,
+                            fillColor: colors[colors.length % index]
+                        }
+                    })
                 }],
                 chart: {
                     type: 'bar',
@@ -109,7 +124,7 @@
                 plotOptions: {
                     bar: {
                         borderRadius: 4,
-                        horizontal: true,
+                        distributed: true // This will apply individual colors to each bar
                     }
                 },
                 dataLabels: {
@@ -118,21 +133,16 @@
                 xaxis: {
                     categories: labels,
                 },
-                colors: [
-                    'rgba(54, 162, 235, 0.7)', // Blue
-                    'rgba(255, 99, 132, 0.7)', // Red
-                    'rgba(255, 159, 64, 0.7)', // Orange
-                    'rgba(255, 206, 86, 0.7)', // Yellow
-                    'rgba(75, 192, 192, 0.7)', // Green
-                    'rgba(153, 102, 255, 0.7)', // Purple
-                    'rgba(201, 203, 207, 0.7)', // gray
-                ]
-
+                yaxis: {
+                    min: 0,
+                    max: 1 // Ensures y-axis scales to a max of 1
+                }
             };
 
             var chart = new ApexCharts($el, options);
             chart.render();
         },
+
         createMultiLineGraph($el, snapshots) {
             const labels = snapshots.map(snapshot => snapshot.fecha);
             const datasets = snapshots[0].calificaciones.map(calificacion => {