can now scroll with wheel in graphs

templates/index.html

@@ -11,6 +11,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
     <script src="https://code.highcharts.com/highcharts.js"></script>
+    <script src="https://code.highcharts.com/modules/mouse-wheel-zoom.js"></script>
     <script src="https://code.highcharts.com/modules/annotations.js"></script>
     <script src="https://code.highcharts.com/modules/accessibility.js"></script>
     <script src="https://code.highcharts.com/themes/adaptive.js"></script>
@@ -358,7 +359,7 @@
 
             // Highcharts configuration
             Highcharts.chart('graph', {
-                chart: { type: 'line' },
+                chart: { type: 'line', zooming: { type: 'x' } },
                 colors: [ 'orange' ],
                 title: { text: 'Savings Over Time' },
                 xAxis: {
@@ -385,7 +386,7 @@
             {% if COMP %}
             // Highcharts configuration
             Highcharts.chart('graph-comp', {
-                chart: { type: 'line' },
+                chart: { type: 'line', zooming: { type: 'x' } },
                 colors: [
                     'orange', // Custom color 1
                     'cyan', // Custom color 2