Diagramme

shadcn Chart (Recharts 2.15). Zeitraumwechsel aktualisiert alle Diagramme, Tabelle und Zusammenfassung aus derselben Quelle.

Diagrammtypen

shadcn/ui · chart (recharts 2.15.4)

Mieteingang

Balken je Monat

Eingang

272.967,00 €

Offen

15.783,00 €

Letzte 6 Monate

Eingang vs. offen

Gestapelte Balken je Monat

Eingang

272.967,00 €

Offen

15.783,00 €

Letzte 6 Monate

Soll und Eingang

Linie · Einzugsquote 94,5 %

Soll

288.750,00 €

Eingang

272.967,00 €

Letzte 6 Monate

Nebenkosten

Fläche je Monat

Nebenkosten gesamt

53.661,00 €

Monatsdurchschnitt

8.943,50 €

Letzte 6 Monate

Kostenverteilung

Donut, Anteile in %

Größter Posten

Heizung · 38 %

Kategorien

Statische Beispielverteilung · unabhängig vom Zeitraum

Import

import { ChartPanel, ChartKpiHeader, useBarMarker } from "@/components/compositions/chart-frame"

Verwendung

Gemeinsame Hülle ChartPanel: Kopf, 40 px Luft, Plot 200 px, 24 px, 56-px-Footer mit Zeitraum und Tabellenumschalter.
Flächen/Balken: --chart-1…5 (Blaufamilie + Neutral); Balken max. 36 px, oben Radius 4.
Datenlinien (Soll): dunkle --chart-line #1E40AF, gestrichelt 6/3 – auch als Legendenlinie.
Balkenhover: ein neutraler Strich in der Mitte des berührten Balkens (useBarMarker), kein Kategoriecursor.
Tooltip und Tabelle in EUR mit 2 Nachkommastellen, Achse kompakt (Tsd.).