From 8446f59740687b68cc0b46c8faf08b1ce5c67b1f Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Tue, 10 Feb 2026 19:10:25 +1100
Subject: [PATCH] can now scroll with wheel in graphs

---
 TODO                 | 1 -
 templates/index.html | 5 +++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/TODO b/TODO
index d708940..40b0323 100644
--- a/TODO
+++ b/TODO
@@ -15,4 +15,3 @@ CALC:
     * still get double health insurance bills sometimes (just viewing a new date might trigger this??? or at least when I changed years)
 
 UI:
-    allow shift-scrollwheel to zoom
diff --git a/templates/index.html b/templates/index.html
index e6454c5..dda4487 100644
--- a/templates/index.html
+++ b/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