added zooming to the chart

Frontend/power-tracker/src/components/LineChart.tsx

@@ -13,6 +13,7 @@ import {
 import { Line } from 'react-chartjs-2';
 //import faker from 'faker';
 import type { ChartData, ChartOptions } from 'chart.js';
+import zoomPlugin from 'chartjs-plugin-zoom';
 
 defaults.responsive = true
 
@@ -23,9 +24,17 @@ ChartJS.register(
   LineElement,
   Tooltip,
   Title,
-  Legend
+  Legend,
+  zoomPlugin
 );
 
+//why is this required
+function getX() {
+  var p: 'x' | 'y' |'xy'
+  p = 'x'
+  return p
+}
+
 export const options = {
   responsive: true,
   plugins: {
@@ -37,14 +46,18 @@ export const options = {
       text: 'Overview',
     },
     zoom: {
+      pan: {
+        enabled: true,
+        mode: getX()
+      },
       zoom: {
         wheel: {
-          enabled: true,
+          enabled: true
         },
         pinch: {
           enabled: true
         },
-        mode: 'xy',
+        mode: getX(),
       }
     },
     tooltip: {
@@ -63,7 +76,6 @@ export const options = {
       }
     },
   },
-  /*
   scales: {
     y: {
         min:0,
@@ -77,7 +89,6 @@ export const options = {
         }
     }
   }
-  */
 };
 
 interface LineProps {