feat: Zoom- und Pan-Funktion für Chart.js hinzugefügt

- Chart.js um das Zoom-Plugin erweitert, um eine bessere Datenanalyse zu ermöglichen.
- Scrollen und Pinch-Zoom für Zoom- und Pan-Funktion aktiviert (x- und y-Achse).
- Nutzer können nun durch die Daten navigieren und gezielt Bereiche vergrößern, was die Übersichtlichkeit erhöht.

components/modules/Kue705FO.jsx

@@ -5,6 +5,7 @@ import Chart from "chart.js/auto";
 import { useSelector } from "react-redux";
 import KueModal from "../modales/KueModal";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
+import zoomPlugin from "chartjs-plugin-zoom";
 
 function Kue705FO({
   isolationswert,
@@ -189,6 +190,9 @@ function Kue705FO({
       );
   };
 
+  // Füge das Plugin zu Chart.js hinzu
+  Chart.register(zoomPlugin);
+
   const createChart = (data) => {
     const ctx = document.getElementById("myChart").getContext("2d");
     new Chart(ctx, {
@@ -227,6 +231,23 @@ function Kue705FO({
             title: { display: true, text: "kOhm" },
           },
         },
+        plugins: {
+          zoom: {
+            pan: {
+              enabled: true,
+              mode: "xy",
+            },
+            zoom: {
+              wheel: {
+                enabled: true, // Zoom mit Mausrad
+              },
+              pinch: {
+                enabled: true, // Pinch-Zoom für Touchgeräte
+              },
+              mode: "xy", // x und y Achsen zoomen
+            },
+          },
+        },
       },
     });
   };