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: {
-                    mode: 'index',
+                    tooltip: {
-                    intersect: false
+                        mode: 'index',
+                        intersect: false,
+                        titleFont: {
+                            size: 14
+                        },
+                        bodyFont: {
+                            size: 14
+                        },
+                    },
+                    legend: {
+                        display: false,
+                        position: "bottom",
+                    },
                 },
                 responsive: true,
                 scales: {
-                    yAxes: [{
+                    y: {
                         ticks: {
+                            font: {
+                                size: 14
+                            },
                             beginAtZero: true
-                        }, gridLines: {
-                            display: true
                         },
-                        scaleLabel: {
+                        grid: {
+                            lineWidth: 0
+                        },
+                        title: {
                             display: true,
-                            labelString: 'Tableaux'
+                            text: 'Tableaux',
+                            font: {
+                                size: 16
+                            }
                         },
                         stacked: true,
-                    }],
+                    },
-                    xAxes: [{
+                    x: {
-                        gridLines: {
+                        ticks: {
-                            display: false
+                            font: {
+                                size: 14
+                            },
+                        },
+                        grid: {
+                            lineWidth: 0
                         },
                         stacked: true,
-                    }]
+                    },
-                },
-                legend: {
-                    display: false,
-                    position: "bottom",
                 },
                 animation: {
                     duration: 0
                 },
-                responsiveAnimationDuration: 0
+                responsiveAnimationDuration: 0,
-            }
+            },
         });
     });
 });

scripts/stats.js

@@ -1,128 +1,172 @@
 jQuery(document).ready(function($)
 {
-    var canvasMonth = document.getElementById("month").getContext('2d');
+    document.fonts.ready.then(function() {
-    var chartMonth = new Chart(canvasMonth, {
+        Chart.defaults.font.family = "'Rubik', Helvetica";
-        type: 'bar',
+        Chart.defaults.color = "#000000";
-        data: {
-            labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
-            datasets: [{
-                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: {
-                yAxes: [{
-                    ticks: {
-                        beginAtZero: true
-                    }, gridLines: {
-                        display: false
-                    },
-                    scaleLabel: {
-                        display: true,
-                        labelString: 'Tableaux'
-                    }
-                }],
-                xAxes: [{
-                    gridLines: {
-                        display: false
-                    }
-                }]
-            },
-            legend: {
-                display: false
-            },
-            animation: {
-                duration: 0
-            },
-            responsiveAnimationDuration: 0
-        }
-    });
 
-    var canvasYear = document.getElementById("year").getContext('2d');
+        var canvasMonth = document.getElementById("month").getContext('2d');
-    var chartYear = new Chart(canvasYear, {
+        var chartMonth = new Chart(canvasMonth, {
-        type: 'bar',
+            type: 'bar',
-        data: {
+            data: {
-            labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
+                labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
-            datasets: [{
+                datasets: [{
-                label: 'nombre de tableaux',
+                    label: 'nombre de tableaux',
-                data: [24, 16, 7, 57, 117, 112, 52],
+                    data: [11, 30, 40, 34, 50, 33, 27, 24, 17, 26, 37, 19],
-                backgroundColor: '#2589BD',
+                    backgroundColor: '#2589BD',
-                borderColor: '#187795',
-                borderWidth: 1
-            }]
-        },
-        options: {
-            scales: {
-                yAxes: [{
-                    ticks: {
-                        beginAtZero: true
-                    }, gridLines: {
-                        display: false
-                    },
-                    scaleLabel: {
-                        display: true,
-                        labelString: 'Tableaux'
-                    }
-                }],
-                xAxes: [{
-                    gridLines: {
-                        display: false
-                    }
                 }]
             },
-            legend: {
+            options: {
-                display: false
+                plugins: {
-            },
+                    tooltip: {
-            animation: {
+                        mode: 'index',
-                duration: 0
+                        intersect: false,
-            },
+                        titleFont: {
-            responsiveAnimationDuration: 0
+                            size: 13
-        }
+                        },
-    });
+                        bodyFont: {
+                            size: 13
+                        },
+                    },
+                    legend: {
+                        display: false,
+                        position: "bottom",
+                    },
+                },
+                scales: {
+                    y: {
+                        ticks: {
+                            beginAtZero: true
+                        },
+                        grid: {
+                            lineWidth: 0
+                        },
+                        title: {
+                            display: true,
+                            text: 'Tableaux'
+                        }
+                    },
+                    xAxes: {
+                        grid: {
+                            lineWidth: 0
+                        },
+                    }
+                },
+                animation: {
+                    duration: 0
+                },
+                responsiveAnimationDuration: 0
+            }
+        });
 
-    var canvasDimension = document.getElementById("dimension").getContext('2d');
+        var canvasYear = document.getElementById("year").getContext('2d');
-    var chartDimension = new Chart(canvasDimension, {
+        var chartYear = new Chart(canvasYear, {
-        type: 'bar',
+            type: 'bar',
-        data: {
+            data: {
-            labels: ["Histoire", "Nature morte", "Paysage", "Portrait", "Scène"],
+                labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
-            datasets: [{
+                datasets: [{
-                label: 'nombre de tableaux',
+                    label: 'nombre de tableaux',
-                data: [2, 42, 173, 59, 107],
+                    data: [24, 16, 7, 57, 117, 112, 52],
-                backgroundColor: '#2589BD',
+                    backgroundColor: '#2589BD',
-                borderColor: '#187795',
-                borderWidth: 1
-            }]
-        },
-        options: {
-            scales: {
-                yAxes: [{
-                    ticks: {
-                        beginAtZero: true
-                    }, gridLines: {
-                        display: false
-                    },
-                    scaleLabel: {
-                        display: true,
-                        labelString: 'Tableaux'
-                    }
-                }],
-                xAxes: [{
-                    gridLines: {
-                        display: false
-                    }
                 }]
             },
-            legend: {
+            options: {
-                display: false
+                plugins: {
+                    tooltip: {
+                        mode: 'index',
+                        intersect: false,
+                        titleFont: {
+                            size: 13
+                        },
+                        bodyFont: {
+                            size: 13
+                        },
+                    },
+                    legend: {
+                        display: false,
+                        position: "bottom",
+                    },
+                },
+                scales: {
+                    y: {
+                        ticks: {
+                            beginAtZero: true
+                        },
+                        grid: {
+                            lineWidth: 0
+                        },
+                        title: {
+                            display: true,
+                            text: 'Tableaux'
+                        }
+                    },
+                    x: {
+                        grid: {
+                            lineWidth: 0
+                        },
+                    }
+                },
+                animation: {
+                    duration: 0
+                },
+                responsiveAnimationDuration: 0
+            }
+        });
+
+        var canvasDimension = document.getElementById("dimension").getContext('2d');
+        var chartDimension = new Chart(canvasDimension, {
+            type: 'bar',
+            data: {
+                labels: ["Histoire", "Nature morte", "Paysage", "Portrait", "Scène"],
+                datasets: [{
+                    label: 'nombre de tableaux',
+                    data: [2, 42, 173, 59, 107],
+                    backgroundColor: '#2589BD',
+                }]
             },
-            animation: {
+            options: {
-                duration: 0
+                plugins: {
-            },
+                    tooltip: {
-            responsiveAnimationDuration: 0
+                        mode: 'index',
-        }
+                        intersect: false,
+                        titleFont: {
+                            size: 13
+                        },
+                        bodyFont: {
+                            size: 13
+                        },
+                    },
+                    legend: {
+                        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
+                },
+                responsiveAnimationDuration: 0
+            }
+        });
     });
 });