fix(chart): Abstand zwischen X-Achsen-Ticks verbessert und letztes Datum sichtbar gemacht

- allowDataOverflow aktiviert, um letzte X-Achse-Ticks nicht abzuschneiden
- rechtes margin (90px) im ComposedChart hinzugefügt
- X-Achsen-Tick-Intervalle für bessere Lesbarkeit angepasst
This commit is contained in:
Ismail Ali
2025-03-23 21:00:08 +01:00
parent 44db20a871
commit 401851de00
2 changed files with 7 additions and 2 deletions

View File

@@ -148,11 +148,16 @@ const LoopMeasurementChart = () => {
return (
<div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
<ResponsiveContainer width="100%" height="100%">
<ComposedChart data={formatierteDaten}>
<ComposedChart
data={formatierteDaten}
margin={{ right: 90, left: 20 }} // <- Platz für das letzte Label
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
dataKey="zeit"
domain={["dataMin", "dataMax"]}
allowDataOverflow={true} // <- wichtig, um letzten Tick nicht abzuschneiden
interval={Math.floor(formatierteDaten.length / 15)}
tickFormatter={(zeit) => {
const date = new Date(zeit);
return `${date.getDate()}.${date.getMonth() + 1}`;