"fancier" graph

views/pages/mapSingle.njk

@@ -140,7 +140,12 @@
             <script>
             const ctx = document.getElementById("chart").getContext("2d");
             const graph = {{ data.graphMap | dump | safe }}
+            const map = "{{ map.map | safe }}"
 
+            Chart.defaults.global.defaultFontFamily = "Manrope Regular"
+            Chart.defaults.global.defaultFontColor = "#9090AF"
+
+            console.log(Chart.defaults)
             const myChart = new Chart(ctx, {
                 type: 'line',
                 options: {
@@ -154,10 +159,24 @@
                     },
                     scales: {
                         xAxes: [{
+                            gridLines: {
+                                display: true,
+                                color: "#50506F"
+                            },
                             type: 'time',
                             time: {
                                 unit: 'year'
                             }
+                        }],
+                        yAxes: [{
+                            gridLines: {
+                                display: true,
+                                color: "#50506F"
+                            },
+                            scaleLabel: {
+                                display: true,
+                                labelString: 'Time (seconds)'
+                            }
                         }]
                     },
                     elements: {
@@ -167,18 +186,15 @@
                         line: {
                             fill: false
                         }
-                    }
+                    },
                 },
                 data: {
                     datasets: [{
-                        label: '{{ map.map }}',
+                        label: map,
                         data: graph,
                         color: [
                             '#EE588F'
                         ],
-                        backgroundColor: [
-                            'rgba(0, 0, 0, 0)'
-                        ],
                         borderColor: [
                             '#FBA7C6'
                         ],