Messkurve für Schleife wird angezeigt

components/modules/Kue705FO.tsx

@@ -281,32 +281,39 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
 
   const createLoopChart = (data: DataLoop[], title: string) => {
     const canvas = document.getElementById("myChart") as HTMLCanvasElement;
-    const ctx = canvas?.getContext("2d");
+    if (!canvas) {
-    if (!ctx) {
+      console.error("Canvas mit ID 'myChart' nicht gefunden.");
-      console.error("Canvas context konnte nicht gefunden werden");
       return;
     }
   
-    const createLoopChart = (data: DataLoop[], title: string) => {
+    const ctx = canvas.getContext("2d");
-      const canvas = document.getElementById("myChart") as HTMLCanvasElement;
-      const ctx = canvas?.getContext("2d");
     if (!ctx) {
-        console.error("Canvas context konnte nicht gefunden werden");
+      console.error("2D-Kontext für Canvas konnte nicht erstellt werden.");
       return;
     }
   
+    // Konvertiere Zeitstempel in ein lesbares Format für die X-Achse
+    const labels = data.map((row) => {
+      const date = new Date(row.t.replace(/-/g, "/")); // Zeitstring parsen
+      return date.toLocaleString("de-DE", {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      });
+    });
+  
     new Chart(ctx, {
       type: "line",
       data: {
-          labels: data.map((row) => new Date(row.t).toLocaleString("de-DE")),
+        labels,
         datasets: [
           {
             label: "Isolationswiderstand (MOhm)",
             data: data.map((row) => row.m),
             borderColor: "#00AEEF",
             borderWidth: 1,
-              tension: 0.1, // Ersatz für lineTension
+            tension: 0.1, // Glättung der Linie
-              pointRadius: 0.3,
+            pointRadius: 1,
             pointHoverRadius: 5,
             fill: false,
             yAxisID: "y",
@@ -316,8 +323,8 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
             data: data.map((row) => row.n),
             borderColor: "black",
             borderWidth: 1,
-              tension: 0.1, // Ersatz für lineTension
+            tension: 0.1,
-              pointRadius: 0.3,
+            pointRadius: 1,
             pointHoverRadius: 5,
             fill: false,
             yAxisID: "y1",
@@ -326,6 +333,10 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
       },
       options: {
         scales: {
+          x: {
+            type: "category",
+            title: { display: true, text: "Zeit" },
+          },
           y: {
             type: "linear",
             position: "left",
@@ -357,7 +368,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
       },
     });
   };
-  };
+  
 
   useEffect(() => {
     const updateAlarmStatus = () => {