Graphique évolution mensuels avec courbe et barre

Vue/Accueil/index.php

@@ -273,36 +273,54 @@
     const dataClaimsMonth = <?= $dataTabClaimsMonth ?>;
 
     new Chart(document.getElementById('claimsLine'), {
-        type: 'line',
         data: {
             labels: dataClaimsMonth.months,
             datasets: [
                 {
+                    type: 'line',
                     label: "Cumulés",
                     data: dataClaimsMonth.monthlyClaims, // cumulés
-                    tension: 0.4,
-                    fill: true,
                     borderColor: "blue",
-                    backgroundColor: "rgba(0,0,255,0.2)"
+                    backgroundColor: "rgba(0,0,255,0.2)",
+                    tension: 0.4,
+                    yAxisID: 'y'
                 },
                 {
+                    type: 'bar',
                     label: "Mensuels",
-                    data: dataClaimsMonth.singleClaims, // valeurs brutes du mois
+                    data: dataClaimsMonth.singleClaims, // valeurs brutes
-                    tension: 0.4,
+                    backgroundColor: "rgba(255,0,0,0.5)",
-                    fill: false,
                     borderColor: "red",
-                    backgroundColor: "rgba(255,0,0,0.2)"
+                    borderWidth: 1,
+                    yAxisID: 'y'
                 }
             ]
         },
         options: {
+            responsive: true,
+            interaction: {
+                mode: 'index',
+                intersect: false
+            },
+            stacked: false,
             scales: {
-                y: { beginAtZero: false }
+                y: {
+                    beginAtZero: true,
+                    title: {
+                        display: true,
+                        text: "Montant des sinistres"
+                    }
+                },
+                x: {
+                    title: {
+                        display: true,
+                        text: "Mois"
+                    }
+                }
             }
         }
     });
 
-
     // Sinistralité
     new Chart(document.getElementById('lossRatioBar'), {
         type: 'bar',