Bereiche
Diagramme
Diagramme in SVG, die deine Daten als einfache Zeilen lesen, Zahlen im Format der Seitensprache zeigen und für Tastatur und Screenreader lesbar bleiben.
Auf dieser Seite
Das passende Diagramm#
22 Diagramme mit 86 Varianten stehen in den Kategorien Charts, Vergleichs-Charts, Statistik-Charts und KPI-, Live- und Karten-Charts. Wähle nach der Frage, die dein Diagramm beantworten soll.
| Component | Varianten | Wofür |
|---|---|---|
| line-chart | single, multi, comparison, straight-dots | Ein Wert über die Zeit, eine oder wenige Reihen. |
| area-chart | simple, gradient, stacked | Menge über die Zeit, gestapelte Teile eines Ganzen. |
| bar-chart | simple, grouped, stacked, horizontal | Kategorien vergleichen, gruppiert oder gestapelt. |
| ranking-chart | lollipop, bump, race, dot-plot, leaderboard | Wer vorn liegt und wie sich die Reihenfolge ändert. |
| comparison-chart | slope, butterfly, diverging, ab-test, indexed | Zwei Zustände oder Gruppen im Vergleich, vorher und nachher, A und B. |
| donut-chart | donut, half, compact | Wenige Anteile an einem Ganzen. |
| proportion-chart | stacked, columns, marimekko, likert | Anteile gestapelt, als Spalten, Marimekko oder Likert-Skala. |
| treemap | squarified, grouped, drilldown, change, compare | Viele Anteile in einer Hierarchie. |
| waterfall-chart | bridge, subtotals, horizontal, cashflow | Wie aus einem Startwert Schritt für Schritt ein Endwert wird. |
| scatter-chart | dots, groups, trend, quadrant, bubble | Zusammenhang zweier Werte, Gruppen, Trends und Quadranten. |
| distribution-chart | histogram, box-plot, density, strip, percentiles | Wie sich Werte verteilen, vom Histogramm bis zum Boxplot. |
| radar-chart | profile, compare, with-list, multiples, target | Profile über mehrere Kriterien. |
| gauge | needle, zones, segmented, dial, row | Ein Wert vor seiner Skala und seinen Zonen. |
| bullet-chart | rows, columns, table, scorecard | Ein Wert gegen Ziel und Bereiche, kompakt in Zeilen. |
| radial-chart | hours, rose, clock-heatmap, sunburst | Stunden, Zyklen und Hierarchien auf einem Kreis. |
| heatmap | calendar, matrix | Muster im Kalender oder in einer Matrix. |
| funnel | columns, bars | Schritte, an denen Menschen abspringen. |
| candlestick-chart | candles, with-volume, ranges, ohlc | Kurse mit Eröffnung, Hoch, Tief und Schluss. |
| region-map | regions, diverging, hex-tiles, symbols | Werte nach Region auf einer gezeichneten Karte. |
| live-chart | line, bars, events, multi, latency | Daten, die laufend ankommen. |
| sparkline | inline, kpi-row | Ein kleiner Verlauf in Text, Tabelle oder Karte. |
Infografiken und erzählte Zahlen findest du unter Datengeschichten, fertige Übersichten unter Dashboards.
Daten als Props#
Linie, Balken und Fläche lesen Zeilen. Jede Zeile ist ein Objekt, xKey nennt die Achse, series die Werte, die gezeichnet werden. So kommen Daten aus einer API oder einer Tabelle ohne Umbau ins Diagramm.
import { LineChart } from '@/components/ui/line-chart';
<LineChart
label="Buchungen 2026"
summary="Die Buchungen steigen von 412 im Januar auf 538 im Juni."
data={[
{ month: '2026-01', bookings: 412, last: 380 },
{ month: '2026-02', bookings: 436, last: 391 },
{ month: '2026-03', bookings: 470, last: 402 },
{ month: '2026-04', bookings: 488, last: 415 },
{ month: '2026-05', bookings: 512, last: 430 },
{ month: '2026-06', bookings: 538, last: 446 },
]}
xKey="month"
series={[
{ key: 'bookings', label: 'Buchungen' },
{ key: 'last', label: '2025', dashed: true },
]}
/>Die übrigen Diagramme nehmen die Form ihrer Daten, etwa steps beim Wasserfall, data mit x und y beim Streudiagramm oder zones beim Gauge. Alle Felder stehen typisiert oben in jeder Datei.
Titel, Kennzahl und Quelle#
Die neueren Diagramme teilen sich einen Rahmen aus chart-figure. Titel, die große Zahl mit ihrer Veränderung, eine Notiz und die Quelle sind einfache Props, jede davon freiwillig.
import { WaterfallChart } from '@/components/ui/waterfall-chart';
<WaterfallChart
variant="subtotals"
label="Vom Umsatz zum Gewinn, 2026"
title="Gewinn 2026"
value="182.400 €"
delta={{ value: '+8,2 %', trend: 'up', note: 'zu 2025' }}
source="Interne Zahlen, auf Hunderter gerundet"
format={{ style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }}
steps={[
{ label: 'Umsatz', value: 640000, kind: 'total' },
{ label: 'Material', value: -214000 },
{ label: 'Rohertrag', value: 0, kind: 'subtotal' },
{ label: 'Personal', value: -198000 },
{ label: 'Miete', value: -45600 },
{ label: 'Gewinn', value: 0, kind: 'subtotal' },
]}
/>| Prop | Typ | Standard | Wofür |
|---|---|---|---|
| title | string | · | Kleiner Titel über dem Diagramm. |
| value | string | · | Die eine große Zahl, fertig formatiert. Zählt einmal hoch, wenn sie ins Bild kommt. |
| delta | { value, trend: 'up' | 'down' | 'flat', good?, note? } | · | Die Veränderung, mit Pfeil. good bestimmt die Farbe, nicht die Richtung. |
| meta | string | · | Kurze Notiz rechts, etwa ein Zeitraum. |
| source | string | · | Quelle oder Fußnote unter dem Diagramm. |
| framed | boolean | true | Kartenfläche. false setzt das Diagramm in eine Karte deiner Seite. |
Zahlenformate#
Werte formatiert jedes Diagramm mit Intl.NumberFormat in der Sprache von KitProvider. format nimmt dieselben Optionen, etwa Währung, Prozent oder Einheit. Achsen kürzen große Zahlen von selbst auf 12K oder 1,2 Mio. Datumswerte gibst du als 2026-03 oder 2026-03-14 an, die Beschriftung folgt der Sprache.
import { KitProvider } from '@/lib/kit';
import { Gauge } from '@/components/ui/gauge';
<KitProvider locale="de">
<Gauge
variant="zones"
label="Auslastung der Küche"
value={0.74}
format={{ style: 'percent', maximumFractionDigits: 0 }}
zones={[
{ to: 0.6, label: 'Ruhig', tone: 'good' },
{ to: 0.85, label: 'Voll', tone: 'watch' },
{ to: 1, label: 'Am Limit', tone: 'critical' },
]}
/>
</KitProvider>Barrierefreiheit und Datentabelle#
Jedes Diagramm ist eine benannte Gruppe mit Satz zur Aussage. Mit der Tastatur gehst du per Pfeiltasten durch die Werte, der aktuelle Wert wird angesagt. Darunter liegt für Screenreader die ganze Datenreihe als Tabelle, mit denselben Formaten wie im Bild.
| Prop | Typ | Standard | Wofür |
|---|---|---|---|
| label | string | · | Name des Diagramms, wird zuerst vorgelesen. Pflicht bei Linie, Balken und Fläche. |
| summary | string | · | Ein Satz dazu, was das Diagramm zeigt. Ohne ihn schreibt das Kit einen aus den Daten. |
| labels | Partial<ChartTexts> | · | Eigene Worte für Hinweis, Summen und Legenden. |
| animate | boolean | true | Das Diagramm zeichnet sich ein, wenn es ins Bild kommt. Nie bei reduzierter Bewegung. |
Farben#
Die erste Reihe trägt den Akzent, die zweite ein ruhiges Grau, weitere Reihen hellere Stufen des Akzents. Flächen wie Heatmap und Karte nutzen eine Rampe aus fünf Stufen. Alles wird aus --primary gemischt und folgt Akzent, Hell und Dunkel von selbst. Eine eigene Farbe je Reihe setzt du über color in series.
Gewinne und Verluste tragen immer zusätzlich ein Vorzeichen, einen Pfeil oder eine gefüllte und hohle Form. Grün und Rot allein unterscheidet nicht jeder.
Mehr zu Akzent und Tokens unter Theming.