# React Sparkline: Tabellenzellen, KPI-Kacheln, Delta-Chips
> React Sparkline für Tabellenzellen und KPI-Kacheln: eine Skala für alle Zeilen, ein Delta-Chip, der gut von schlecht trennt, Scrubben per Tastatur und Touch.
- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 19. Okt. 2026
- Kategorie: [Komponenten-Guides](https://wingo-ui.com/de/blog/category/components)
- Lesezeit: 9 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/react-sparkline
- Englische Fassung: https://wingo-ui.com/blog/react-sparkline
## Kurz gesagt
Eine React Sparkline ist ein Diagramm in Wortgröße ohne Achsen, das neben einer Zahl die Form eines Trends zeigt, in einer Tabellenzelle, einer KPI-Kachel oder mitten im Satz. Gib allen Zeilen einer Tabelle dasselbe Minimum und Maximum, damit die Linien vergleichbar bleiben, stell den aktuellen Wert und einen Delta-Chip daneben, der nach Bedeutung grün oder rot wird, und gib ihr eine zugängliche Zusammenfassung wie „from $8,200 to $12,480, +52.2%“. Sparkline, Stat Card und Trend Badge von Wingo UI erledigen das aus einem Daten-Array.
Du hast eine Tabelle mit Kunden, Produkten oder Servern, und jede Zeile soll „steigt“ oder „fällt“ sagen, ohne gleich zum vollen Diagramm zu werden. Genau dafür gibt es die React Sparkline: eine Linie in Wortgröße neben der Zahl, ohne Achsen, Legende und Raster. Die schwierigen Stellen kommen später. Jede Zeile skaliert auf ihren eigenen Bereich, also wirkt ein stagnierender Kunde genauso lebhaft wie einer, der wächst. Das Delta daneben wird rot, wenn die Kosten sinken. Ein Screenreader liest nichts vor, und am Smartphone verschwindet der Tooltip unter dem Finger. Dieser Guide zeigt, wann eine Sparkline passt, wie du sie in eine Tabellenzelle und in eine KPI-Kachel setzt, welcher Delta-Chip dazugehört und welche Fallen es gibt.
## Was ist eine Sparkline und wann setze ich sie ein?
Nimm eine Sparkline, wenn die Form eines Trends wichtiger ist als die genauen Werte. Edward Tufte, der den Begriff geprägt hat, beschreibt sie in seinen [Notizen zu Theorie und Praxis der Sparklines](https://www.edwardtufte.com/notebook/sparkline-theory-and-practice-edward-tufte/) als kleine, dichte und schlichte Grafik in Wortgröße und typografischer Auflösung. Als Orte dafür nennt er Sätze, Tabellen, Überschriften und Tabellenkalkulationen.
In einer React-App sind das drei Stellen:
1. **Tabellenzellen und Listenzeilen**: Umsatz pro Kunde, Antwortzeit pro Endpoint, Bestand pro Lager.
2. **KPI-Kacheln** auf einem Dashboard, unter oder neben der großen Zahl.
3. **Fließtext**: „Die Anmeldungen sind das ganze Quartal gestiegen“, mit der Linie inline in Schriftgröße.
Ein Sparkline-Diagramm ist das falsche Werkzeug, wenn jemand Werte an einer Achse ablesen, zwei Reihen in einer Box vergleichen oder Datumsangaben sehen muss. Dafür nimmst du ein [Line Chart](https://wingo-ui.com/components/line-chart) und lässt die Sparkline als Zusammenfassung stehen, die darauf verlinkt.
## Welche React Sparkline Chart Libraries gibt es?
Wähl nach dem Stack, den du schon hast: react-sparklines für eine schlichte SVG-Linie, den SparkLineChart von MUI X, wenn du MUI nutzt, die Sparkline von Wingo UI für Tabellenzellen mit Wert und Delta. Die Angaben unten stammen aus der Doku, dem Quellcode und der npm-Registry des jeweiligen Projekts, Stand 19. Oktober 2026.
| Option | Was es ist | Typen | Punkte inspizieren | Hinweise |
|---|---|---|---|---|
| [react-sparklines](https://github.com/borisyankov/react-sparklines) | MIT-lizenziertes npm-Paket mit kombinierbaren Kindkomponenten (`SparklinesLine`, `SparklinesCurve`, `SparklinesBars`, `SparklinesSpots`, `SparklinesReferenceLine`, `SparklinesNormalBand`) | Linie, Kurve, Balken, Punkte | Kein Tooltip; ein `onMouseMove`-Callback auf Linienpunkten und Balken | Die neueste Version auf npm, 1.7.0, erschien im Juli 2017 |
| [MUI X SparkLineChart](https://mui.com/x/react-charts/sparkline/) | Teil des MIT-lizenzierten Pakets `@mui/x-charts` (9.15.0) | Linie, oder Balken mit `plotType="bar"`, optional `area` | `showTooltip` und `showHighlight` | Nutzt das MUI-Theme; `yAxis` nimmt `min` und `max` |
| [Wingo UI Sparkline](https://wingo-ui.com/components/sparkline) | Pro-Komponente als Quellcode, `npx wingo-ui@latest add sparkline` | Linie, Fläche, Balken, Win-Loss | `interactive`: Hover, Scrubben per Touch, Pfeiltasten | Kommt mit einem Wrapper für Wert und Delta, Trendfarben und einer zugänglichen Zusammenfassung |
Nutzt deine App schon MUI, ist der SparkLineChart die naheliegende Wahl: Er teilt dein Theme, und du holst dir keinen zweiten Chart-Stack ins Projekt. react-sparklines ist kostenlos und hängt nur von `prop-types` ab, hatte aber seit 2017 kein Release mehr. Tooltip, Tastatur und Screenreader-Support baust du dort also selbst. Der Rest dieses Guides nutzt die Komponenten von Wingo UI.
## Wie baue ich eine React Sparkline in eine Komponente ein?
Installier sie und gib ihr ein Array aus Zahlen, die älteste zuerst. Standard ist eine Linie mit 96 mal 28 px und einem Punkt auf dem letzten Wert, die in einer Listenzeile am Smartphone gut lesbar ist.
```bash
npx wingo-ui@latest add sparkline
```
```tsx
import { Sparkline } from "@/components/ui/sparkline";
const revenue = [8200, 8650, 8400, 9100, 9480, 9230, 10150, 10600, 10380, 11420, 11900, 12480];
export function RevenueNote() {
return (
Der Umsatz stieg das ganze Quartal{" "}
{" "}
und schloss bei $12,480.
);
}
```
Die Props, die du zuerst brauchst:
- `type`: `"line"`, `"area"` (eine Linie über einer weichen Füllung), `"bar"` oder `"win-loss"` (gleich hohe Striche nach oben für positive und nach unten für negative Werte, für Serien oder Tagesziele).
- `width` und `height` in px. `width={0}` füllt das Elternelement, das dann selbst eine Breite braucht.
- `tone` färbt die Linie (standardmäßig in der neutralen Textfarbe). `trendColor` färbt sie stattdessen nach Richtung: grün, wenn der letzte Wert über dem ersten liegt, rot, wenn er darunter liegt.
- `invertTrend` für Kennzahlen, bei denen sinkend gut ist, etwa Kosten, Churn oder Antwortzeit.
- `reference`: eine gestrichelte Haarlinie beim ersten Wert (`"first"`), beim Durchschnitt (`"average"`) oder bei null (`"zero"`).
- `data` kann auch Einträge mit einem `label` oder einem ISO-`date` für die Anzeige enthalten, und `null` lässt eine Lücke.
Schalt `interactive` ein, und die Sparkline wird zu einem Tab-Stopp, den du Punkt für Punkt lesen kannst. Fahr mit der Maus darüber, zieh mit dem Finger darüber oder fokussier sie und nutz die Pfeiltasten.
> Live-Demo (Sparkline): Fahr mit der Maus über die Linie oder zieh einen Finger darüber: Die Anzeige nennt jede Woche, und der Betrag rechts läuft mit. Spring mit Tab hinein und geh mit den Pfeiltasten links und rechts durch die Punkte. Probier sie unter [Sparkline](https://wingo-ui.com/components/sparkline) aus und installier sie mit `npx wingo-ui@latest add sparkline`.
## Wie setze ich eine Sparkline in eine Tabellenzelle?
Gib jeder Zeile dieselbe Skala. Eine Sparkline in der Tabellenzelle skaliert standardmäßig auf ihr eigenes Minimum und Maximum, also füllt jede Linie ihre Box: Ein Kunde, der von $9,000 auf $9,400 gewachsen ist, sieht genauso steil aus wie einer, der sich verdoppelt hat. Gib jeder Zeile dasselbe `min` und `max`, dann bedeutet eine höhere Linie mehr Umsatz. Der Preis dafür: Die Linie eines kleinen Kunden liegt fast flach am unteren Rand. Wenn die Form jeder Zeile wichtiger ist als ihre Größe, behalt die Skala pro Zeile und schreib das in den Spaltenkopf.
`SparklineWithValue` stellt den aktuellen Wert und ein [Trend Badge](https://wingo-ui.com/components/trend-badge) neben die Linie, und genau das brauchen die meisten Tabellenzellen. Der Wert ist standardmäßig der letzte Punkt, das Badge die prozentuale Veränderung vom ersten zum letzten.
```tsx
import { SparklineWithValue } from "@/components/ui/sparkline";
type ClientRow = { id: string; name: string; weekly: number[] };
export function ClientsTable({ rows }: { rows: ClientRow[] }) {
// ein Bereich für alle Zeilen, damit die Linien vergleichbar sind
const max = Math.max(0, ...rows.flatMap((row) => row.weekly));
return (
Wöchentlicher Umsatz pro Kunde, letzte 12 Wochen
| Kunde |
Letzte 12 Wochen |
{rows.map((row) => (
| {row.name} |
|
))}
);
}
```
`layout="responsive"` stapelt Wert und Badge unter 640px über der Linie und setzt sie ab dort in eine Reihe, damit die Zelle am Smartphone schmal bleibt. Das Badge nutzt standardmäßig die Variante `ghost` und die Größe `sm`, also farbigen Text mit Pfeil und ohne Füllung, und so bleibt eine ganze Spalte davon ruhig. Sitzt eine interaktive Sparkline in einer scrollenden Tabelle, wird die Anzeige per Portal gerendert und über der Linie fixiert, sodass die Tabelle sie nicht abschneiden kann.
Für eine Tabelle mit mehr als einer Handvoll Spalten übernimmt die [Data Table](https://wingo-ui.com/components/data-table) Sortierung und Paginierung, und der [Guide zu responsiven Tabellen](https://wingo-ui.com/de/blog/responsive-table-mobile-cards) zeigt, wie ihre Zeilen am Smartphone zu Karten werden.
## Wie baue ich eine KPI-Kachel mit Sparkline?
Nimm die [Stat Card](https://wingo-ui.com/components/stat-card). Sie bekommt Label, Wert, Delta und die Werte für die Sparkline und ordnet alles als Dashboard-Kachel an: Die Zahl zählt hoch, sobald sie zum ersten Mal ins Bild scrollt, die Delta-Pille wird eingeblendet, und die KPI-Sparkline zeichnet sich von links nach rechts.
```bash
npx wingo-ui@latest add stat-card
```
```tsx
import { Timer, Wallet } from "lucide-react";
import { StatCard, StatGroup } from "@/components/ui/stat-card";
export function Kpis({ daily, responseHours }: { daily: number[]; responseHours: number[] }) {
return (
}
value={128450}
format="currency"
delta={12.4}
deltaLabel="ggü. Vormonat"
sparkline={daily}
locale="en-US"
/>
}
value={8100}
format="duration"
delta={-8.5}
deltaLabel="ggü. Vormonat"
invertTrend
sparkline={responseHours}
sparklineType="bar"
locale="en-US"
/>
);
}
```
`format="duration"` erwartet Sekunden, also wird aus 8100 „2 hr, 15 min“. Mit `invertTrend` erscheint die gesunkene Antwortzeit grün, während der Pfeil weiter nach unten zeigt. `StatGroup` ordnet die Kacheln am Smartphone zu zweit pro Reihe an und ab 1024px zu viert.
Die eingebaute Sparkline der Karte ist dekorativ: Die Karte spricht Wert und Veränderung schon in einem Satz aus, also ist das Diagramm vor Screenreadern verborgen und lässt sich nicht inspizieren. Sollen Leser die Linie scrubben können, gib die eigenständige Sparkline über die Prop `chart` mit:
```tsx
import { StatCard } from "@/components/ui/stat-card";
import { Sparkline } from "@/components/ui/sparkline";
const revenue = [8200, 8650, 8400, 9100, 9480, 9230, 10150, 10600, 10380, 11420, 11900, 12480];
}
/>
```
Drück in der Demo unten auf „Simulate a new day“: Ein neuer Tag kommt zur Sparkline dazu, und Wert und Delta zählen von ihrem aktuellen Stand zu den neuen Zahlen.
> Live-Demo (Stat Card): Drück auf Simulate a new day: Die Sparkline bekommt einen Punkt dazu, und Wert und Delta zählen zu ihren neuen Zahlen. Probier sie unter [Stat Card](https://wingo-ui.com/components/stat-card) aus und installier sie mit `npx wingo-ui@latest add stat-card`.
## Was gehört in den Delta-Chip neben einer Sparkline?
Ein Pfeil, eine Zahl mit Vorzeichen und eine Farbe, die sich nach der Bedeutung richtet, nicht nach dem Vorzeichen. Die Linie zeigt die Form, der Chip liefert die Zahl, die die Leute zitieren. Das [Trend Badge](https://wingo-ui.com/components/trend-badge) ist genau dieser Chip als eigene Komponente, für Stellen, an denen du den Wert selbst ausgibst.
```tsx
import { TrendBadge } from "@/components/ui/trend-badge";
```
Das erste zeigt „+12.4%“ in Grün, das zweite „−$3,200“ in Rot und das dritte ein grünes „−0.8%“, weil weniger Churn gut ist. Ein paar Props, die du kennen solltest:
- `format`: `"percent"` (12.4 wird zu +12.4%), `"number"` oder `"currency"`. Werte ab einer Million werden kompakt („+$1.3M“).
- `flatThreshold` (standardmäßig 0.05): Kleinere Veränderungen zählen als keine Veränderung und werden grau, damit +0.01% nicht grün aufblitzt.
- `neutralTone` färbt jede Richtung in der neutralen Textfarbe, für Kennzahlen, bei denen steigend weder gut noch schlecht ist, etwa offene Tickets.
- `animated` ist standardmäßig aus, damit in einer Tabelle nicht fünfzig Badges gleichzeitig hochzählen. Schalt es für eine einzelne große Zahl ein.
Screenreader hören die Richtung in Worten („Up 12.4% vs. last month“), nie das Pfeilzeichen. Die Sätze änderst du beim Übersetzen über `labels`.
> Live-Demo (Trend badge): Drück auf Change, um durch die Werte zu gehen: Die Pille gleitet zu jeder neuen Zahl, der Pfeil dreht sich mit der Richtung, und ein Wert unter der Schwelle wird grau. Probier sie unter [Trend badge](https://wingo-ui.com/components/trend-badge) aus und installier sie mit `npx wingo-ui@latest add trend-badge`.
## Wie mache ich eine Sparkline barrierefrei?
Sag den Trend in Worten. Eine nicht interaktive Sparkline rendert mit `role="img"` und einem zugänglichen Namen aus deinem `label` plus einer Zusammenfassung aus erstem Wert, letztem Wert und Veränderung. Mit den englischen Standardtexten klingt das so: „Revenue, last 12 weeks: from $8,200 to $12,480, +52.2%“. Über `labels.summary` formulierst du sie in einer anderen Sprache.
Mit `interactive` ist die Sparkline ein einziger Tab-Stopp. Links und Rechts gehen durch die Punkte, Pos1 und Ende springen an die Enden, Bild auf und Bild ab springen um 10 Punkte, und Esc blendet die Anzeige aus. Eine Live-Region im Modus „polite“ liest jeden Punkt vor, während du dich bewegst. Bei der Farbe ist `trendColor` nie das einzige Signal: Der Delta-Chip zeigt Vorzeichen und Pfeil, und das zählt für alle, die Rot und Grün nicht unterscheiden können. Ist reduzierte Bewegung eingestellt, fallen das Einzeichnen und das Hochzählen weg, und alles erscheint gleich im Endzustand.
## Wie funktioniert eine Sparkline am Smartphone?
Die Standardhöhe von 28px passt in eine Listenzeile, und eine interaktive Sparkline nutzt die ganze Zeilenhöhe (8px über und unter der Zeichnung) als Touch-Fläche. Tipp und zieh seitlich, um zu scrubben; senkrechtes Ziehen scrollt weiterhin die Seite. Die Anzeige sitzt über der Linie statt unter dem Finger, und ein zweites Tippen auf denselben Punkt oder ein Tippen daneben blendet sie aus. Dieselben Regeln zu Touch-Flächen und Gesten ziehen sich durch die [Kategorie Komponenten-Guides](https://wingo-ui.com/de/blog/category/components) und den [Guide zu React-Formularkomponenten](https://wingo-ui.com/de/blog/react-form-components-guide).
## Was sind die typischen Fallen bei einer React Sparkline?
Sechs Fehler tauchen auf, sobald echte Daten ankommen.
- **Eine eigene Skala pro Zeile.** Jede Linie füllt ihre Box, und die Zeilen lassen sich nicht mehr vergleichen. Teil `min` und `max`.
- **Die falsche Sparkline importieren.** `stat-card.tsx` exportiert eine eigene kleine `Sparkline` (die dekorative in der Karte). Für Tabellen und `interactive` importierst du aus `@/components/ui/sparkline`.
- **Eine Reihe, die bei null beginnt.** Eine prozentuale Veränderung ab 0 ist nicht definiert, also zeigt das Badge „–“. Gib `delta` selbst mit oder nutz `deltaFormat="number"`, das die Differenz aus letztem und erstem Wert ausgibt.
- **Zu viele Balken.** Über 120 Punkten fallen `type="bar"` und `"win-loss"` auf eine Linie zurück, im Development-Modus mit einer Warnung. Fass tägliche Daten vorher zu Wochen zusammen.
- **`width={0}` in einem Elternelement ohne Breite.** Eine Sparkline mit voller Breite misst ihr Elternelement; in einem Inline-Element mit automatischer Breite hat sie nichts zu füllen. Nimm eine Grid-Zelle oder eine `flex-1`-Box.
- **Grün für steigende Kosten.** Setz `invertTrend` bei Kosten, Churn und Antwortzeit, auf der Sparkline und auf dem Badge (`SparklineWithValue` reicht es durch).
Das Dashboard drumherum, also KPI-Reihen über einer gefilterten Tabelle, baust du im [Next.js-Admin-Dashboard-Tutorial](https://wingo-ui.com/de/blog/nextjs-admin-dashboard-tutorial) von Anfang bis Ende, und der [Vergleich der Dashboard-Libraries](https://wingo-ui.com/de/blog/best-react-component-library-for-dashboard) zeigt, welche Libraries überhaupt KPI-Karten mitbringen.
## Wie füge ich sie meinem Projekt hinzu?
Führ `npx wingo-ui@latest add sparkline stat-card trend-badge` aus. Die CLI kopiert den Quellcode nach `components/ui`, ergänzt die Helper, die sie importieren (das Chart-Kit, die Zahlenformatierung, die Tones), und installiert `motion`, `d3-shape`, `d3-scale` und `lucide-react`. Alle drei sind Pro-Komponenten ([Preise](https://wingo-ui.com/de/pricing)). Wenn du mit Claude Code oder Cursor baust, liest der KI-Agent diese Props über den [MCP-Server](https://wingo-ui.com/docs/mcp), statt sie zu raten.
## Komponenten in diesem Artikel
- [Sparkline](https://wingo-ui.com/components/sparkline) (Pro): A React sparkline: a word-sized chart for table cells, list rows, KPI tiles and running text, as a line, an area, bars or win / loss ticks. Installation: `npx wingo-ui@latest add sparkline`
- [Stat Card](https://wingo-ui.com/components/stat-card) (Pro): A React stat card for dashboards: a label, a big number that counts up, a delta pill that knows good from bad, a sparkline and a goal bar. Installation: `npx wingo-ui@latest add stat-card`
- [Trend badge](https://wingo-ui.com/components/trend-badge) (Pro): A React trend badge, the delta chip for KPIs, table cells and leaderboards: an arrow, a signed change and a color that says if it is good. Installation: `npx wingo-ui@latest add trend-badge`
## Häufige Fragen
### Was ist ein Sparkline-Diagramm?
Eine Sparkline ist ein winziges Linien- oder Balkendiagramm ohne Achsen, Beschriftungen und Legende, so groß, dass es neben ein Wort oder eine Zahl passt. Edward Tufte hat den Begriff geprägt und beschreibt sie als Grafik in Wortgröße, die überall stehen kann, wo auch ein Wort oder eine Zahl steht: in einem Satz, einer Tabelle oder einer Überschrift.
### Wie baue ich in React eine Sparkline in eine Tabellenzelle ein?
Rendere in der Zelle eine Sparkline mit fester Größe (zum Beispiel 88 mal 32 px) neben dem aktuellen Wert und einem Delta-Chip. Gib jeder Zeile dieselben Werte für min und max, damit eine höhere Linie eine größere Zahl bedeutet; mit einer eigenen Skala pro Zeile füllt jede Linie ihre Box, und die Zeilen lassen sich nicht mehr vergleichen.
### Braucht eine Sparkline einen Tooltip?
Nur wenn die Leute exakte Werte brauchen. Für die meisten Tabellen reicht eine nicht interaktive Sparkline mit dem letzten Wert daneben; schalt das Inspizieren (interactive in der Sparkline von Wingo UI) ein, wenn jemand eine einzelne Woche nachsehen will, und sorg dafür, dass es auch mit Tastatur und Touch funktioniert.
### Wie mache ich eine Sparkline barrierefrei?
Gib ihr role="img" und einen zugänglichen Namen, der den Trend in Worten nennt, etwa „Revenue, last 12 weeks: from $8,200 to $12,480, +52.2%“. Verlass dich nicht allein auf Grün und Rot: Schreib den Wert und eine Veränderung mit Vorzeichen als Text dazu.
### Ist die Sparkline von Wingo UI kostenlos?
Nein. Sparkline, Stat Card und Trend Badge sind Pro-Komponenten. Der Helper Number format, den sie gemeinsam nutzen, ist kostenlos, ebenso der Animated Counter, mit dem die Stat Card ihre Zahl hochzählt.
---
Quelle: https://wingo-ui.com/de/blog/react-sparkline