Chart

Flächen-, Balken-, Linien- und Ringdiagramm auf Basis von Recharts, vollständig hinter fend-ui-APIs gekapselt. Farben kommen aus der kontrastgeprüften Chart-Palette, Zahlen aus useFormat(). Legenden schalten Serien ein und aus; eine versteckte Tabelle macht die Werte für Screenreader lesbar, leere Daten zeigen einen Leerzustand.

KPI-Dashboard

Vier Kennzahlen in Tint-Flächen, darunter der Umsatzverlauf als Flächendiagramm. Die Legende blendet einzelne Serien per Klick aus; Zahlen formatiert useFormat in der gewählten Sprache.

Umsatz: 81.000 €
Kosten: 45.000 €
Marge: 44 %
Neue Kunden: 128

Umsatz und Kosten je Monat
Monat	Umsatz	Kosten
Jan	48.000	31.000
Feb	52.000	33.000
Mär	61.000	38.000
Apr	58.000	36.000
Mai	72.000	41.000
Jun	81.000	45.000

Balkenvergleich

Balken eignen sich für den Vergleich je Kategorie. Das Gitter bleibt in der Rahmenfarbe, die Achsenbeschriftung in fg-subtle.

Umsatz und Kosten als Balken
Monat	Umsatz	Kosten
Jan	48.000	31.000
Feb	52.000	33.000
Mär	61.000	38.000
Apr	58.000	36.000
Mai	72.000	41.000
Jun	81.000	45.000

Eine Serie

Bei nur einer Serie entfällt die Legende. Der Linienkontrast stammt aus der Chart-Palette und hält in Light und Dark mindestens 3 : 1 gegen die Kartenfläche.

Aktive Nutzer je Monat
Monat	Aktive Nutzer
Jan	1.240
Feb	1.480
Mär	1.710
Apr	1.660
Mai	2.040
Jun	2.380

Ring

Der Ring zeigt Anteile eines Ganzen. Jedes Segment trägt seine eigene Palettenfarbe; die Legende lässt sich zum Ausblenden nutzen.

Umsatz nach Kanal
Kanal	Umsatz
Direkt	42.000
Suche	28.000
Empfehlung	16.000
Social	9.000

Ohne Daten

Fehlen Daten, erscheint statt leerer Achsen ein gestrichelter Leerzustand mit klarer Beschriftung.

Keine Daten

Zugänglichkeit

Jedes Diagramm trägt einen zugänglichen Namen und wiederholt seine Werte in einer sr-only-Tabelle. Auch ausgeblendete Serien bleiben dort lesbar.

tsx

<LineChart
  data={monate}
  config={{ umsatz: { label: 'Umsatz', color: 'accent' } }}
  categoryKey="month"
  label="Umsatz je Monat"
/>