Update Chart.js and change style for a more fitting one

divers.html

@@ -10,10 +10,9 @@
     <link rel="stylesheet" href="styles/main.css" media="screen">
     <link rel="stylesheet" href="styles/fancybox.css" media="screen">
     <link rel="stylesheet" href="plugins/jquery.fancybox.min.css" media="screen">
-    <link rel="stylesheet" href="plugins/chart.min.css" media="screen">
     <script src="plugins/jquery-3.5.1.min.js"></script>
     <script src="plugins/jquery.fancybox.min.js"></script>
-	<script src="plugins/chart.bundle.min.js"></script>
+	<script src="plugins/chart-3.9.1.min.js"></script>
     <script src="scripts/menu.js"></script>
 	<script src="scripts/divers.js"></script>
 	<script src="scripts/stats.js"></script>
@@ -162,13 +161,13 @@
 
         <div id="stats">
             <div class="stat">
-                <canvas id="month" width="400" height="200"></canvas>
+                <canvas id="month"></canvas>
             </div>
             <div class="stat">
-                <canvas id="year" width="400" height="200"></canvas>
+                <canvas id="year"></canvas>
             </div>
             <div class="stat">
-                <canvas id="dimension" width="400" height="200"></canvas>
+                <canvas id="dimension"></canvas>
             </div>
         </div>
     </article>

informations.html

@@ -8,9 +8,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="images/favicon.png">
     <link rel="stylesheet" href="styles/main.css" media="screen">
-    <link rel="stylesheet" href="plugins/chart.min.css" media="screen">
     <script src="plugins/jquery-3.5.1.min.js"></script>
-	<script src="plugins/chart.bundle.min.js"></script>
+	<script src="plugins/chart-3.9.1.min.js"></script>
     <script src="scripts/menu.js"></script>
     <script src="scripts/informations.js"></script>
 </head>

plugins/chart.min.css

@@ -1 +0,0 @@
-@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}

scripts/informations.js

@@ -50,6 +50,9 @@ jQuery(document).ready(function($)
             gatherYear(tens, 2010, 2020);
         }
 
+        Chart.defaults.font.family = "'Rubik', Helvetica";
+        Chart.defaults.color = "#000000";
+
         var canvasPhoto = document.getElementById("photo").getContext('2d');
         var chartPhoto = new Chart(canvasPhoto, {
             type: 'bar',
@@ -83,40 +86,60 @@ jQuery(document).ready(function($)
                 }]
             },
             options: {
-                tooltips: {
+                plugins: {
+                    tooltip: {
                         mode: 'index',
-                    intersect: false
+                        intersect: false,
+                        titleFont: {
+                            size: 14
                         },
-                responsive: true,
+                        bodyFont: {
-                scales: {
+                            size: 14
-                    yAxes: [{
-                        ticks: {
-                            beginAtZero: true
-                        }, gridLines: {
-                            display: true
                         },
-                        scaleLabel: {
-                            display: true,
-                            labelString: 'Tableaux'
-                        },
-                        stacked: true,
-                    }],
-                    xAxes: [{
-                        gridLines: {
-                            display: false
-                        },
-                        stacked: true,
-                    }]
                     },
                     legend: {
                         display: false,
                         position: "bottom",
                     },
+                },
+                responsive: true,
+                scales: {
+                    y: {
+                        ticks: {
+                            font: {
+                                size: 14
+                            },
+                            beginAtZero: true
+                        },
+                        grid: {
+                            lineWidth: 0
+                        },
+                        title: {
+                            display: true,
+                            text: 'Tableaux',
+                            font: {
+                                size: 16
+                            }
+                        },
+                        stacked: true,
+                    },
+                    x: {
+                        ticks: {
+                            font: {
+                                size: 14
+                            },
+                        },
+                        grid: {
+                            lineWidth: 0
+                        },
+                        stacked: true,
+                    },
+                },
                 animation: {
                     duration: 0
                 },
-                responsiveAnimationDuration: 0
+                responsiveAnimationDuration: 0,
-            }
+            },
         });
     });
 });

scripts/stats.js

@@ -1,5 +1,9 @@
 jQuery(document).ready(function($)
 {
+    document.fonts.ready.then(function() {
+        Chart.defaults.font.family = "'Rubik', Helvetica";
+        Chart.defaults.color = "#000000";
+
         var canvasMonth = document.getElementById("month").getContext('2d');
         var chartMonth = new Chart(canvasMonth, {
             type: 'bar',
@@ -9,31 +13,43 @@ jQuery(document).ready(function($)
                     label: 'nombre de tableaux',
                     data: [11, 30, 40, 34, 50, 33, 27, 24, 17, 26, 37, 19],
                     backgroundColor: '#2589BD',
-                borderColor: '#187795',
-                borderWidth: 1
                 }]
             },
             options: {
-            scales: {
+                plugins: {
-                yAxes: [{
+                    tooltip: {
-                    ticks: {
+                        mode: 'index',
-                        beginAtZero: true
+                        intersect: false,
-                    }, gridLines: {
+                        titleFont: {
-                        display: false
+                            size: 13
+                        },
+                        bodyFont: {
+                            size: 13
                         },
-                    scaleLabel: {
-                        display: true,
-                        labelString: 'Tableaux'
-                    }
-                }],
-                xAxes: [{
-                    gridLines: {
-                        display: false
-                    }
-                }]
                     },
                     legend: {
-                display: false
+                        display: false,
+                        position: "bottom",
+                    },
+                },
+                scales: {
+                    y: {
+                        ticks: {
+                            beginAtZero: true
+                        },
+                        grid: {
+                            lineWidth: 0
+                        },
+                        title: {
+                            display: true,
+                            text: 'Tableaux'
+                        }
+                    },
+                    xAxes: {
+                        grid: {
+                            lineWidth: 0
+                        },
+                    }
                 },
                 animation: {
                     duration: 0
@@ -51,31 +67,43 @@ jQuery(document).ready(function($)
                     label: 'nombre de tableaux',
                     data: [24, 16, 7, 57, 117, 112, 52],
                     backgroundColor: '#2589BD',
-                borderColor: '#187795',
-                borderWidth: 1
                 }]
             },
             options: {
-            scales: {
+                plugins: {
-                yAxes: [{
+                    tooltip: {
-                    ticks: {
+                        mode: 'index',
-                        beginAtZero: true
+                        intersect: false,
-                    }, gridLines: {
+                        titleFont: {
-                        display: false
+                            size: 13
+                        },
+                        bodyFont: {
+                            size: 13
                         },
-                    scaleLabel: {
-                        display: true,
-                        labelString: 'Tableaux'
-                    }
-                }],
-                xAxes: [{
-                    gridLines: {
-                        display: false
-                    }
-                }]
                     },
                     legend: {
-                display: false
+                        display: false,
+                        position: "bottom",
+                    },
+                },
+                scales: {
+                    y: {
+                        ticks: {
+                            beginAtZero: true
+                        },
+                        grid: {
+                            lineWidth: 0
+                        },
+                        title: {
+                            display: true,
+                            text: 'Tableaux'
+                        }
+                    },
+                    x: {
+                        grid: {
+                            lineWidth: 0
+                        },
+                    }
                 },
                 animation: {
                     duration: 0
@@ -93,31 +121,46 @@ jQuery(document).ready(function($)
                     label: 'nombre de tableaux',
                     data: [2, 42, 173, 59, 107],
                     backgroundColor: '#2589BD',
-                borderColor: '#187795',
-                borderWidth: 1
                 }]
             },
             options: {
-            scales: {
+                plugins: {
-                yAxes: [{
+                    tooltip: {
-                    ticks: {
+                        mode: 'index',
-                        beginAtZero: true
+                        intersect: false,
-                    }, gridLines: {
+                        titleFont: {
-                        display: false
+                            size: 13
+                        },
+                        bodyFont: {
+                            size: 13
                         },
-                    scaleLabel: {
-                        display: true,
-                        labelString: 'Tableaux'
-                    }
-                }],
-                xAxes: [{
-                    gridLines: {
-                        display: false
-                    }
-                }]
                     },
                     legend: {
-                display: false
+                        display: false,
+                        position: "bottom",
+                    },
+                },
+                responsive: true,
+                scales: {
+                    y: {
+                        ticks: {
+                            beginAtZero: true
+                        },
+                        grid: {
+                            lineWidth: 0
+                        },
+                        title: {
+                            display: true,
+                            text: 'Tableaux'
+                        },
+                        stacked: true,
+                    },
+                    x: {
+                        grid: {
+                            lineWidth: 0
+                        },
+                        stacked: true,
+                    }
                 },
                 animation: {
                     duration: 0
@@ -125,4 +168,5 @@ jQuery(document).ready(function($)
                 responsiveAnimationDuration: 0
             }
         });
+    });
 });