diff --git a/components/modules/Kue705FO.tsx b/components/modules/Kue705FO.tsx index a1e3b93..f8f5ed5 100644 --- a/components/modules/Kue705FO.tsx +++ b/components/modules/Kue705FO.tsx @@ -212,6 +212,12 @@ const Kue705FO: React.FC = ({ chartInstance.current = null; // Referenz zurücksetzen } + // Maximal- und Minimalwerte berechnen + const minX = Math.min(...dataTDR.map((row) => row.t)); + const maxX = Math.max(...dataTDR.map((row) => row.t)); + const minY = Math.min(...dataTDR.map((row) => row.m)); + const maxY = Math.max(...dataTDR.map((row) => row.m)); + // Neues Chart erstellen try { chartInstance.current = new Chart(ctx, { @@ -223,13 +229,20 @@ const Kue705FO: React.FC = ({ label: "Pegel", data: dataTDR.map((row) => row.m), borderColor: "#00AEEF", - borderWidth: 1, + borderWidth: 2, fill: false, + tension: 0.1, // Weiche Kurve }, ], }, options: { responsive: true, + maintainAspectRatio: false, // Ermöglicht flexible Größe + layout: { + padding: { + bottom: 25, // Fügt zusätzliches Padding unten hinzu + }, + }, plugins: { zoom: { pan: { @@ -251,10 +264,14 @@ const Kue705FO: React.FC = ({ x: { type: "linear", position: "bottom", - title: { display: true, text: "Zeit" }, + title: { display: true, text: "Entfernung" }, + min: minX - 5, // Etwas Puffer hinzufügen + max: maxX + 5, }, y: { title: { display: true, text: "Pegel" }, + min: minY - 10, // Puffer für Y-Werte + max: maxY + 10, }, }, },