# React Funnel Chart: Conversion, Drop-off und Kohorten
> So baust du einen React Funnel Chart, der pro Schritt Anzahl, Conversion und Drop-off zeigt, als bündige Balken oder als Trichter, der ehrlich bleibt.
- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 6. Nov. 2026
- Kategorie: [Komponenten-Guides](https://wingo-ui.com/de/blog/category/components)
- Lesezeit: 9 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/react-funnel-chart
- Englische Fassung: https://wingo-ui.com/blog/react-funnel-chart
## Kurz gesagt
Ein React Funnel Chart zeigt pro Schritt drei Zahlen: die Anzahl, die Conversion gemessen am ersten (oder vorherigen) Schritt und den Drop-off gegenüber dem Schritt davor, in Prozent und in verlorenen Personen. Bündige Balken liest man am leichtesten, und sie funktionieren auch auf dem Smartphone; ein Trichter taugt für eine Übersicht, solange seine Breiten den Werten folgen. In beiden Fällen ist das Diagramm nur ehrlich, wenn jeder Schritt dieselbe Kohorte im selben Zeitraum zählt.
Dein Produkt hat einen Signup-Flow, einen Checkout oder eine Vertriebspipeline, und jemand fragt, wo die Leute abspringen. Ein React Funnel Chart beantwortet diese Frage, aber nur, wenn er mehr zeigt als einen bunten Kegel. Die meisten Beispiele für React Funnel Diagramme zeichnen fünf Trapeze mit festen Breiten und einem Label darin. Das sieht richtig aus und sagt wenig: Dass 60% der qualifizierten Leads nie ein Angebot bekommen haben, musst du immer noch selbst ausrechnen. Dieser Guide zeigt, was ein Funnel Chart anzeigen sollte, wann du bündige Balken statt eines Trichters zeichnest, welche Bibliotheken es gibt und wie du einen mit dem [Funnel Chart](https://wingo-ui.com/components/funnel-chart) von Wingo UI baust.
## Was sollte ein Conversion Funnel Diagramm zeigen?
Drei Zahlen pro Schritt, alle direkt im Diagramm:
1. **Die Anzahl.** 1,240 Leads, 620 qualifiziert, 248 Angebote verschickt.
2. **Die Conversion.** Der Wert des Schritts als Anteil einer Basis. Gemessen am ersten Schritt erzählt sie die Gesamtgeschichte („3.3% der Leads wurden gewonnen“). Gemessen am vorherigen Schritt isoliert sie einen einzelnen Übergang („40% der qualifizierten Leads bekamen ein Angebot“).
3. **Der Drop-off.** Was der vorherige Schritt auf dem Weg verloren hat. So lässt sich der Funnel Drop-off berechnen: (vorher - jetzt) / vorher, in Prozent und in Stück. „60% Drop-off, 372 verloren“ ist der Satz, auf den Leute reagieren.
Der Drop-off zwischen den Schritten ist der Grund, warum es einen Funnel überhaupt gibt. Wenn du nur die Anzahlen zeigst, rechnet der Leser im Kopf, und bei fünf Schritten macht das niemand zuverlässig.
## Balken oder Trichter: Was ist ehrlicher?
In den meisten Fällen bündige Balken. Jeder Schritt bekommt eine Zeile mit Label, Anzahl und Conversion sowie einen Balken auf einer gemeinsamen Spur, der an derselben linken Kante beginnt. Längen mit gemeinsamer Grundlinie lassen sich leicht vergleichen, 248 gegen 96 erkennst du auf einen Blick. Die Zeilen passen außerdem ohne jede Änderung auf ein 360px breites Smartphone.
Die Trichterform hat zwei Probleme. Das Auge vergleicht Fläche und Neigung jedes Trapezes, und beide hängen vom Wert des nächsten Schritts ab. Und viele Funnel-Designs skalieren die Breiten überhaupt nicht. MUI X dokumentiert das offen: Die Abschnitte seines Funnels nutzen standardmäßig eine Band-Skala mit gleichen Breiten, und erst mit `scaleType: 'linear'` auf der Kategorie-Achse folgt die Breite dem Wert ([MUI X Funnel Doku](https://mui.com/x/react-charts/funnel/), November 2026).
Als Übersichtskachel funktioniert ein Trichter trotzdem, solange die Breiten den Werten folgen und die Zahlen neben der Form stehen.
## Welche React Funnel Chart Bibliotheken gibt es?
Fünf solltest du kennen: Recharts (kostenlos, MIT), MUI X Charts Pro (kostenpflichtig), ApexCharts (kostenlos für kleine Organisationen), KendoReact (eine kommerzielle Suite) und das kleine Paket react-funnel-pipeline. shadcn/ui hat keinen. Jede Zeile unten haben wir am 6. November 2026 mit der Doku, der Preisseite und dem npm-Eintrag des Projekts abgeglichen.
| Bibliothek | Version | Lizenz und Preis | So funktioniert der Funnel |
|---|---|---|---|
| [Recharts](https://recharts.github.io/en-US/api/Funnel/) | 3.10.1 (Juli 2026) | MIT | `FunnelChart` mit einem `Funnel` aus Trapezen, `dataKey`, `lastShapeType` mit `triangle` oder `rectangle`. Drop-off-Labels baust du selbst. |
| [MUI X Charts Pro](https://mui.com/x/react-charts/funnel/) | `@mui/x-charts-pro` 9.17.0 (Oktober 2026) | Pro-Plan, $299 pro Entwickler und Jahr laut [mui.com/pricing](https://mui.com/pricing/) | `FunnelChart` mit Kurven (`linear`, `bump`, `pyramid`, `step`...), einem `gap`, gefüllten oder umrandeten Abschnitten; gleiche Breiten, solange die Achse nicht linear ist. |
| [ApexCharts](https://apexcharts.com/docs/chart-types/funnel-chart/) | 8.7.0 (Oktober 2026) | Kostenlos für Organisationen unter $2M Jahresumsatz, Budget oder Finanzierung; sonst ab $199 pro Entwickler und Jahr laut [apexcharts.com/pricing](https://apexcharts.com/pricing/) | Ein horizontales Balkendiagramm mit `isFunnel: true`; laut Doku musst du die Daten selbst sortieren. |
| [KendoReact Funnel](https://www.telerik.com/kendo-react-ui/funnel-chart) | kommerzielle Suite | Teil einer Suite aus kostenlosen und kostenpflichtigen Komponenten, mit kostenloser Testphase | Neck Ratio (standardmäßig 0.3) und optional dynamische Neigung und Höhe, die Segmente nach Wert bemessen. |
| [react-funnel-pipeline](https://github.com/DarylBuckle/react-funnel-pipeline) | 0.2.0 (August 2022) | MIT | Ein kleiner, gestylter Funnel; seit über drei Jahren kein Release. |
Falls du einen shadcn Funnel Chart gesucht hast: Die offizielle Chart-Galerie von shadcn/ui baut auf Recharts auf und listet Area, Bar, Line, Pie, Radar und Radial Charts, aber keinen Funnel ([ui.shadcn.com/charts](https://ui.shadcn.com/charts), November 2026). Nutzt deine App schon Recharts, ist dessen `Funnel` der kostenlose Weg, und die Drop-off-Labels ergänzt du selbst. Zahlst du schon für MUI X Pro, passt sein Funnel ohne neue Abhängigkeit zu deinem Theme. Willst du die drei Zahlen pro Schritt, Tastaturbedienung und ein Smartphone-Layout, ohne sie selbst zu schreiben, bringt die Komponente von Wingo UI genau das mit.
## Wie baue ich einen React Funnel Chart mit Wingo UI?
Installier ihn mit der CLI. Sie kopiert den Quellcode samt dem Chart Kit, das er importiert, in dein Projekt:
```bash
npx wingo-ui@latest add funnel-chart
```
Gib die Schritte in ihrer Reihenfolge an, den breitesten zuerst. Jeder Schritt braucht eine `id`, ein `label` und einen `value`:
```tsx
import { FunnelChart, type FunnelStep } from "@/components/ui/funnel-chart";
const pipeline: FunnelStep[] = [
{ id: "lead", label: "Leads", value: 1240 },
{ id: "qualified", label: "Qualifiziert", value: 620 },
{ id: "proposal", label: "Angebot verschickt", value: 248 },
{ id: "negotiation", label: "Verhandlung", value: 96 },
{ id: "won", label: "Gewonnen", value: 41 },
];
export function SalesPipeline() {
return ;
}
```
Das rendert die Standardvariante `variant="bars"`: eine Zeile pro Schritt mit Anzahl und Conversion gegenüber dem ersten Schritt, und zwischen den Zeilen einen Chip mit Drop-off und der Zahl der Verlorenen. Die Balkenlänge ist der Wert geteilt durch den größten Wert, die Balken sind also immer maßstabsgetreu.
Probier im Panel unten den Wechsel des Zeitraums aus: Die Balken gleiten auf die Längen vom August, und jeder Chip aktualisiert sich.
> Live-Demo (Funnel chart): Wechsle zwischen Sep und Aug: Die Balken gleiten auf ihre neue Länge, und jeder Drop-off-Chip aktualisiert sich. Klick eine Zeile an, um sie auszuwählen. Probier sie unter [Funnel chart](https://wingo-ui.com/components/funnel-chart) aus und installier sie mit `npx wingo-ui@latest add funnel-chart`.
Die Props, die du als Nächstes brauchst:
- `variant`: `bars` oder `funnel` (die Trichterform), dazu `orientation` (`vertical` oder `horizontal`) und `curve` (`linear` oder `smooth`) für die Form.
- `baseline`: `first` (Standard) oder `previous`, je nachdem, woran die Conversion gemessen wird.
- `dropoffThreshold`: Drop-offs ab diesem Prozentwert erscheinen in der Danger-Farbe. Standard ist 10; `0` schaltet die Farbe ab.
- `valueFormat`: `number`, `compact`, `currency` oder `percent`, mit `currency` und `locale`, oder `formatValue` für volle Kontrolle.
- `onValueChange` oder `onStepClick`: Sobald du eins davon übergibst, werden die Zeilen zu Buttons, zum Beispiel um die Deals einer Phase zu öffnen.
## Wie finde ich den größten Drop-off im Funnel?
Stell die Basis auf den vorherigen Schritt um und heb den Schwellenwert an. Gemessen am ersten Schritt ist jeder spätere Prozentwert klein, und der schwache Übergang geht unter. Gemessen am vorherigen Schritt zeigt jede Zeile ihre eigene Durchlaufquote, und der Schwellenwert markiert nur die Verluste, um die du dich kümmern musst:
```tsx
```
In der Pipeline vom September bleiben damit zwei rote Chips: 60% Verlust zwischen qualifiziert und Angebot, und 61.3% zwischen Angebot und Verhandlung. Der erste Schritt zeigt keine Conversion, weil es davor nichts gibt.
> Live-Demo (Funnel chart): baseline previous und ein Schwellenwert von 60%: Nur die zwei größten Drop-offs erscheinen in Rot. Probier sie unter [Funnel chart](https://wingo-ui.com/components/funnel-chart) aus und installier sie mit `npx wingo-ui@latest add funnel-chart`.
Für die Trichteroptik setzt du `variant="funnel"`. Fahr mit der Maus über ein Segment oder tipp es auf dem Smartphone an, und eine Anzeige nennt Wert, Conversion und Drop-off; zieh den Finger an der Form entlang, um durch die Schritte zu wandern. Ein horizontaler Funnel stapelt sich in Containern unter 480px Breite von oben nach unten.
> Live-Demo (Funnel chart): Die Funnel-Variante mit weichen Seiten: Fahr über ein Segment oder tipp es an, um seine Zahlen zu lesen. Probier sie unter [Funnel chart](https://wingo-ui.com/components/funnel-chart) aus und installier sie mit `npx wingo-ui@latest add funnel-chart`.
## Warum ist ein Funnel nur mit konsistenten Kohorten ehrlich?
Weil die Prozentwerte voraussetzen, dass die Leute in Schritt 3 eine Teilmenge der Leute in Schritt 2 sind. Das stimmt, wenn du eine Kohorte durch alle Schritte verfolgst, etwa alle, die im September zum Lead wurden. Es stimmt nicht mehr, wenn:
- **Schritte Events statt Personen zählen.** Wer den Warenkorb dreimal öffnet, zählt bei „Warenkorb“ dreimal und bei „Besuche“ einmal.
- **Schritte verschiedene Zeiträume nutzen.** Die Angebote vom September enthalten Leads aus dem August, also blähen die Erfolge des Vormonats die Conversion von qualifiziert zu Angebot auf.
- **Leute mittendrin einsteigen.** Ein Klick im Newsletter, der auf einer Produktseite landet, überspringt die früheren Schritte.
- **Der Zeitraum noch offen ist.** Eine Kohorte von letzter Woche hatte noch keine Zeit zum Abschluss, also sieht der letzte Schritt wie ein Einbruch aus.
Jeder dieser Fälle kann einen späteren Schritt über den davor heben. Das Diagramm von Wingo UI versteckt das nicht: Ein Schritt, der größer ist als sein Vorgänger, bekommt einen Gain-Chip (zum Beispiel „15.9% gain, 62 more“) statt eines negativen Drop-offs, und ein Schritt mit 0 behält seine Zeile. Behandle einen Gain zuerst als Frage an die Daten und erst danach als gute Nachricht. Gib dem Diagramm ein `label`, das die Kohorte nennt („Leads, angelegt im September 2026“), damit klar ist, was man gerade sieht.
## Was gehört auf einem Dashboard neben einen Funnel Chart?
Eine Stat Card für den Trend und ein Balkendiagramm für Segmente. Der Funnel beantwortet „wo springen die Leute ab“; zwei weitere Fragen stehen meist auf demselben Dashboard daneben.
**„Wird es besser?“** Setz die Gesamt-Conversion in eine [Stat Card](https://wingo-ui.com/components/stat-card) über den Funnel, mit der Veränderung gegenüber der vorherigen Kohorte. Conversion Rates ändern sich in Prozentpunkten, also zeig das Delta auch in Punkten:
```tsx
"use client";
import { StatCard } from "@/components/ui/stat-card";
export function WinRate() {
return (
`${d.toFixed(1)} Pkt.`}
deltaLabel="ggü. Kohorte August"
locale="en-US"
/>
);
}
```
Die Zeile `"use client"` steht da, weil `formatDelta` eine Funktion ist und eine Server Component keine Funktion an eine Client Component übergeben kann.
**„Welches Segment konvertiert am besten?“** Fünf Funnels nebeneinander lassen sich schlecht vergleichen. Nimm die eine Quote, auf die es ankommt, und vergleich sie mit einem [Bar Chart](https://wingo-ui.com/components/bar-chart) über Kanäle oder Monate; horizontale Balken halten lange Kanalnamen auf dem Smartphone lesbar:
```tsx
import { BarChart } from "@/components/ui/bar-chart";
const byChannel = [
{ channel: "Organische Suche", rate: 4.1 },
{ channel: "Empfehlung", rate: 6.8 },
{ channel: "Paid Social", rate: 1.9 },
];
export function WinRateByChannel() {
return (
);
}
```
Alle drei Diagramme teilen sich das [Chart Kit](https://wingo-ui.com/components/chart-kit) (Palette, Zahlenformat, Tabelle für Screenreader), deshalb sieht ein Prozentwert überall gleich aus. Der Block [KPI Dashboard](https://wingo-ui.com/components/kpi-dashboard) bringt einen Funnel, Stat-Kacheln und Bar Charts auf einen Screen, falls du die fertig zusammengesetzte Version willst. Den Rest der Charts findest du im Guide [React Charts mit Tailwind](https://wingo-ui.com/de/blog/react-charts-tailwind) und im [Guide zu shadcn KPI Cards](https://wingo-ui.com/de/blog/shadcn-kpi-cards).
## Wie funktioniert er mit Tastatur, Screenreader und Smartphone?
Das Diagramm ist ein `figure`, dessen zugänglicher Name dein `label` um die Gesamt-Conversion ergänzt („Vertriebspipeline, September 2026, 3.3% overall conversion“), und `description` fügt eine Kernaussage in einem Satz hinzu. Jede Zeile trägt einen versteckten Satz mit allen drei Zahlen, und eine Tabelle für Screenreader listet jeden Schritt auf. Sind die Zeilen Buttons, bilden sie einen einzigen Tab-Stopp: Pfeil hoch und runter wechseln zwischen ihnen, Home und End springen an die Enden, Enter oder Leertaste wählen aus, Escape hebt die Auswahl auf. Die Funnel-Variante ergänzt eine Live-Region, die jeden Schritt vorliest, während du dich bewegst.
Auf dem Smartphone braucht die Balkenvariante kein eigenes Layout: Die Zeilen sind voll breit, und auswählbare Zeilen werden auf Touchscreens zu 44px hohen Tippzielen. Unter 480px nimmst du besser die Balken; ein Trichter quetscht seine Labels in eine schmale Spalte.
## Was sind die typischen Fehler bei Funnel Charts?
Drei tauchen immer wieder auf:
- **Ein Funnel für ungeordnete Kategorien.** Traffic nach Quelle hat keine Reihenfolge. Nimm ein Balkendiagramm oder einen Donut.
- **Danger-Farbe auf jedem Chip.** Bei fünf Schritten und dem Standard-Schwellenwert von 10% wird fast alles rot. Heb `dropoffThreshold` auf den Verlust an, bei dem du handeln würdest.
- **Animation in Exporten.** Übergib `animated={false}` für Thumbnails, PDFs und Screenshots.
## Wie füge ich ihn meinem Projekt hinzu?
Führ `npx wingo-ui@latest add funnel-chart` aus, dann `add stat-card` und `add bar-chart`, wenn du das ganze Set willst. Alle drei sind Pro-Komponenten: Pro kostet $8 im Monat, $80 im Jahr oder einmalig $150, die Details stehen auf der [Preisseite](https://wingo-ui.com/de/pricing). Jedes Prop kannst du vorher im Playground auf der [Doku-Seite zum Funnel Chart](https://wingo-ui.com/components/funnel-chart) ausprobieren. Weitere Guides zu einzelnen Komponenten findest du in der [Kategorie Komponenten-Guides](https://wingo-ui.com/de/blog/category/components).
## Komponenten in diesem Artikel
- [Funnel chart](https://wingo-ui.com/components/funnel-chart) (Pro): A React funnel chart of conversion: each step's count, its conversion and the drop-off between steps, as aligned bars or a tapered shape. Installation: `npx wingo-ui@latest add funnel-chart`
- [Bar chart](https://wingo-ui.com/components/bar-chart) (Pro): Compares categories or periods as columns or horizontal bars, grouped, stacked or 100%, with negatives below a clear zero line. Installation: `npx wingo-ui@latest add bar-chart`
- [Chart kit](https://wingo-ui.com/components/chart-kit) (Pro): A React chart toolkit: the palette, formatters, measuring container, axes, crosshair, tooltip, legend and data table charts share. Installation: `npx wingo-ui@latest add chart-kit`
- [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`
## Häufige Fragen
### Wie baue ich einen Funnel Chart in React?
Gib einer Funnel-Komponente eine geordnete Liste von Schritten mit id, label und value. Mit Wingo UI ist das , installiert mit npx wingo-ui@latest add funnel-chart; Conversion und Drop-off berechnet die Komponente selbst.
### Wie berechnet man den Drop-off in einem Funnel Chart?
Der Drop-off ist der Anteil des vorherigen Schritts, der diesen Schritt nicht erreicht hat: (vorher - jetzt) / vorher. Von 620 qualifizierten Leads zu 248 Angeboten liegt der Drop-off bei 60%, und 372 Leads gingen verloren.
### Misst man die Conversion am ersten oder am vorherigen Schritt?
Am ersten Schritt, wenn du das Gesamtbild willst (3.3% der Leads wurden Kunden), am vorherigen, wenn du den einen schwächsten Übergang suchst. Der FunnelChart von Wingo UI wechselt mit baseline="first" oder baseline="previous" zwischen beiden.
### Hat shadcn/ui einen Funnel Chart?
Stand November 2026 nicht. Die Chart-Galerie von shadcn/ui baut auf Recharts auf und listet Area, Bar, Line, Pie, Radar und Radial Charts. Am nächsten kommst du mit der Funnel-Komponente von Recharts, die Drop-off-Labels schreibst du dann selbst.
### Warum ist in meinem Funnel ein Schritt größer als der davor?
Meist, weil die Schritte verschiedene Gruppen zählen: Events statt Personen, unterschiedliche Zeiträume oder Nutzer, die mittendrin eingestiegen sind. Zähl eine Kohorte durch alle Schritte; der FunnelChart von Wingo UI zeigt in diesem Fall einen Gain-Chip, damit das Problem sichtbar bleibt.
### Ist der Funnel Chart von Wingo UI kostenlos?
Nein. Funnel Chart, Bar Chart, Stat Card und das gemeinsame Chart Kit sind Pro-Komponenten. Die Doku-Seiten und die Live-Playgrounds sind für alle offen.
---
Quelle: https://wingo-ui.com/de/blog/react-funnel-chart