React Charts Tailwind: 4 Charts und ein Kit für jedes Theme
Du baust ein Dashboard und willst deine React Charts Tailwind-konform stylen, damit sie aussehen wie der Rest der App. Nur reichen Tailwind-Klassen in die meisten Chart-Libraries gar nicht hinein: Die Farben stehen in einer JavaScript-Konfiguration, der Tooltip hat seine eigene Schrift, im Dark Mode wird das Raster zu grellen Linien, und auf dem Smartphone liegt der Tooltip unter deinem Daumen. Diese Liste zeigt, was React Diagramme mit Tailwind richtig machen müssen, wie die gängigen Libraries damit umgehen, und fünf Bausteine von Wingo UI für ein Dashboard: Area Chart, Bar Chart, Line Chart, Donut Chart und das Chart Kit darunter, jeweils mit Demo oder Snippet.
Was müssen React Charts mit Tailwind richtig machen?
Sechs Dinge, und die ersten beiden betreffen Tailwind direkt:
- Farben als Tokens. Jede Serienfarbe ist eine CSS-Variable, folgt also deinem Theme wie
bg-card, und niemand hardcodet#8884d8in einer Komponente. - Ein gestalteter Dark Mode. Dark bekommt eigene Farbstufen. Ein Blau, das auf Weiß gut lesbar ist, ist auf fast schwarzem Grund oft zu dunkel, und eine automatische Umkehrung behebt das nicht.
- Ein Smartphone-Layout. Auf einem Touchscreen wird die Anzeige über dem Plot fixiert, statt einem Finger zu folgen, ein seitliches Ziehen fährt durch die Punkte, und ein vertikales Ziehen scrollt weiterhin die Seite.
- Zugang per Screenreader und Tastatur. Ein Diagramm ist ein Bild von Zahlen, also braucht es die Zahlen auch als Text: ein Label, eine kurze Kernaussage und eine Datentabelle.
- Kein Layout Shift. Das Diagramm reserviert seine Höhe, bevor es seine Breite misst, damit die Seite nicht springt, wenn es auf dem Client rendert.
- Zahlenformate. Währungen, kompakte Ticks („$128K“) und Datumsangaben laufen über
Intl, mit einemlocale-Prop.
Punkt 3 übersiehst du am leichtesten, wenn du nur mit der Maus auf einem breiten Bildschirm testest: Der Tooltip, den du am Laptop per Hover öffnest, landet am Smartphone unter dem Daumen, der getippt hat.
Welche React Chart Library mit Tailwind solltest du nehmen?
Die meisten beliebten Optionen bauen auf Recharts auf, das selbst mit D3-Modulen zeichnet. Die Angaben unten stammen aus der Doku des jeweiligen Projekts und aus der npm-Registry, geprüft am 19. Oktober 2026.
Recharts ist eine solide Standardwahl, und sowohl shadcn/ui als auch Tremor bauen darauf auf. Seit Version 3.0 ist laut den Release Notes (opens in a new tab) die Accessibility-Schicht bei kartesischen und polaren Diagrammen standardmäßig aktiv, Tastatur- und Screenreader-Unterstützung sind also eingebaut. Wenn dein Team die API schon kennt, bleib dabei. Eine Recharts Alternative lohnt sich, wenn du andere Voreinstellungen für Smartphones und Dark Mode willst und den Chart-Quellcode selbst besitzen möchtest. Die shadcn-Doku weist darauf hin, dass der Container eine Klasse min-h-[VALUE] braucht, um responsiv zu sein. Das solltest du wissen, bevor du ein Diagramm auslieferst.
Bei Chart.js solltest du es dir in einer Tailwind-App zweimal überlegen. Die Farben sind JavaScript-Optionen, die auf ein Canvas gezeichnet werden, Dark Mode heißt also: Token-Werte mit getComputedStyle auslesen und beim Theme-Wechsel neu zeichnen.
Wie unterscheiden sich d3 React Charts von Recharts?
Sie sind eine Schicht dünner. Bei d3 React Charts rechnet d3-scale Werte in Pixel um und d3-shape macht aus Punkten einen SVG-Path-String; React rendert das <path>-Element und verwaltet das DOM. Recharts erledigt dieselben Berechnungen in eigenen Komponenten, die du über Props konfigurierst.
Die Charts von Wingo UI setzen auf diesen schlanken Ansatz: kein Recharts, kein d3-selection, nichts, was außerhalb von React das DOM anfasst. Der praktische Unterschied für dich: Der Quellcode, den du kopierst, ist das Diagramm selbst. Willst du ändern, wie ein Tooltip oder ein Balkenende aussieht, bearbeitest du eine Datei, die dir gehört. Die d3-shape-Doku (opens in a new tab) beschreibt dasselbe Muster: Die Ausgabe eines Line-Generators geht direkt in das d-Attribut eines Paths.
1. Area Chart: Wie zeige ich den Umsatz pro Kanal im Zeitverlauf?
Nimm gestapelte Flächen, wenn die Serien zusammen eine Summe ergeben, überlappende Flächen, wenn du zwei Volumen vergleichst, und Prozent, wenn dich die Anteile interessieren. Das Area Chart kann alle drei über ein einziges type-Prop, und beim Umschalten gleiten die Bänder in ihre neue Form.
ISO-Monate wie "2026-09" erscheinen auf der Achse als „Sep“ und in der Anzeige als „September 2026“. Die Anzeige eines gestapelten Diagramms listet das oberste Band zuerst und ergänzt eine Zeile „Total“; ein Prozent-Diagramm zeigt jeden Wert mit seinem Anteil. fill wechselt zwischen "gradient" (Standard), "solid" und "none", und referenceLines zeichnet gestrichelte Zielwerte.
2. Bar Chart: Wie vergleiche ich Monate oder Kategorien?
Nimm Balken für abgegrenzte Zeiträume und Kategorien. Das Bar Chart ist standardmäßig grouped und kann außerdem stacked und percent. Negative Werte wachsen von einer klaren Nulllinie nach unten, und getBarColor färbt einen Balken nach seinem Wert:
"danger" und "success" sind Tone-Namen, die Balken nutzen also in beiden Themes deine Status-Tokens. Wertelabels aus showValues wechseln in die kompakte Form („$128K“), wenn die vollen Beträge nicht passen, und ein Label ohne Platz rutscht in seinen Balken oder wird weggelassen, aber nie abgeschnitten. Für lange Kategorienamen am Smartphone setzt du orientation="horizontal": Die Namen wandern in eine Label-Spalte links, und der Tooltip behält den vollen Text.
Fahr in der Demo mit der Maus über einen Monat oder tipp ihn an, dann schalte auf Stacked und 100% und sieh zu, wie sich die Balken bewegen.
$ npx wingo-ui@latest add bar-chart3. Line Chart: Wie zeige ich einen Trend im Vergleich zum Vorjahr?
Nimm eine Linie für einen Trend über viele Punkte und eine gestrichelte zweite Serie für den Vergleichszeitraum. Im Line Chart wird eine Serie mit dashed: true mit 70% Deckkraft gezeichnet und bekommt in der Anzeige eine gedämpfte Zeile.
endLabels setzt den letzten Wert und den Seriennamen ans Ende jeder Linie. Unter 360px bleibt nur der kurze Wert, und eine Legende benennt die Linien; ein Label, das kollidieren würde, fällt weg, statt über ein anderes geschoben zu werden. Für eine ruhige einzelne KPI-Linie übergibst du colors={["neutral"]} mit showArea und showDots. Um zwei übereinander gestapelte Diagramme auszurichten, gib beiden dieselbe yAxisWidth und einen gemeinsamen activeIndex, dann bewegt sich das Fadenkreuz in beiden.
Schalte in der Demo auf Compare 2025 und fahr an der Linie entlang, um beide Jahre abzulesen.
$ npx wingo-ui@latest add line-chart4. Donut Chart: Wie zeige ich Teile eines Ganzen?
Nimm einen Donut, wenn es eine Handvoll Teile gibt und die Summe zählt. Das Donut Chart zeigt die Summe in der Mitte und eine Legende mit Werten und Anteilen. Alles über maxSlices hinaus (standardmäßig 6) fasst es zu einem grauen Segment „Other“ zusammen, dessen Anzeige auflistet, was darin steckt.
Die Segmente sind standardmäßig nach Größe sortiert, das größte zuerst (sort="none" behält deine Reihenfolge). Wählst du ein Segment aus, bleibt es angehoben, während die Mitte seinen Wert, Namen und Anteil zeigt; mit value und onValueChange wird diese Auswahl kontrolliert, sodass eine Liste neben dem Diagramm sie steuern kann. Die Legende steht ab 480px Containerbreite neben dem Diagramm und in schmaleren Containern darunter. Das ist eine Container Query, also stimmt es schon im Server-HTML und auch in einer schmalen Dashboard-Spalte am Desktop.
Die Trefferfläche des Rings ist für Maus und Touch auf jeder Seite um 12px verbreitert, damit dünne Ringe und kleine Segmente leicht zu treffen sind. Am Smartphone fährst du mit dem Finger am Ring entlang durch die Segmente, und am Ende wird das Segment ausgewählt, auf dem der Finger liegen bleibt.
$ npx wingo-ui@latest add donut-chart5. Chart Kit: Wie baue ich einen Diagrammtyp, der nicht in der Liste steht?
Nimm das Chart Kit, die gemeinsame Schicht, auf der die vier Diagramme aufbauen. Es exportiert die Palette, Formatter, einen messenden Container, Skalen, Achsen, Raster, den Inspektor mit Fadenkreuz, Tooltip, Legende, die Tabelle für Screenreader sowie Lade- und Leerzustände. Ein eigenes Diagramm setzt sich aus diesen Teilen zusammen und bekommt dasselbe Verhalten bei Touch, Tastatur und Theme:
ChartContainer reserviert die 200px, bevor er misst, und ruft deine Funktion dann mit der echten Breite und Höhe auf. niceScale liefert eine lineare Skala mit etwa einem Tick pro 56px, und getCurve und stackData kapseln die Kurven und Stacks von d3-shape, wenn du Linien oder Bänder brauchst. Über das Kit bleiben auch die anderen Diagramme der Library, etwa Sparkline und Gauge, konsistent mit diesen vier.
Wie gehen die Diagramme mit Dark Mode um?
Guter Support für React Charts Dark Mode beginnt mit Farben, die eigene dunkle Werte haben. Die Charts von Wingo UI haben acht Paletten-Slots. ChartContainer setzt --series-1 bis --series-8 auf dem Figure-Element, und das dunkle Theme tauscht sie gegen eigens gewählte Stufen, statt die hellen umzukehren. Laut dem Kommentar im Quellcode wurde die Reihenfolge so geprüft, dass benachbarte Farben bei den häufigen Formen von Farbenblindheit in beiden Themes unterscheidbar bleiben. Eine neunte Serie bekommt nie einen neuen Farbton; sie wird zu „other“, einem Grau, gemischt aus deiner Vordergrundfarbe.
Jedes color- und colors-Prop nimmt drei Arten von Werten: einen Slot ("series-3"), einen Tone ("neutral", "brand", "success", "danger", abgebildet auf deine Status-Tokens) oder eine beliebige CSS-Farbe. Rasterlinien sind eine schwache Tönung der Vordergrundfarbe, Achsenbeschriftungen nutzen die gedämpfte Textfarbe, so treten beide in jedem Theme zurück. Die Lücken zwischen Balkensegmenten und die Ringe um Punkte bekommen die Farbe aus surface, Standard ist var(--surface). Setz surface, wenn das Diagramm auf einer anderen Fläche liegt, zum Beispiel surface="var(--card)", damit die Lücken zum Hintergrund passen. Der Guide zu Dark Mode in Tailwind v4 erklärt den Klassen-Toggle und das Token-Setup, auf dem diese Variablen aufbauen.
Wie funktionieren die Diagramme am Smartphone?
Die Anzeige weicht deinem Finger aus. tooltipMode="auto" lässt sie mit der Maus neben dem Fadenkreuz schweben und fixiert sie auf Touchscreens über dem Plot. Tipp einen Punkt an, um ihn festzuhalten, zieh seitlich, um durch die Punkte zu fahren, und tipp erneut oder irgendwo außerhalb, um die Auswahl aufzuheben. Die Plot-Ebene beansprucht nur horizontales Ziehen, ein vertikales Wischen scrollt also weiterhin die Seite.
Beschriftungen der X-Achse werden vom neuesten Wert rückwärts ausgedünnt, so ist der letzte Monat immer zu sehen, und bei 360px überlappen keine Labels. Legenden brechen um, und Legendeneinträge sind echte Buttons mit größerer Trefferfläche bei Touch-Bedienung. Für ein Dashboard, das auch auf Smartphones läuft, zeigt das Tutorial zum Next.js Admin Dashboard diese Diagramme in einer kompletten App-Shell.
Sind die Diagramme barrierefrei?
Jedes Diagramm ist ein Element mit role="figure", einem zugänglichen Namen aus label und einer optionalen Kernaussage in einem Satz aus description, vorgelesen über aria-describedby. Jedes Diagramm rendert außerdem eine Datentabelle, die unsichtbar ist und im Server-HTML steht, so bekommen ein Screenreader oder ein Crawler die Zahlen, ohne JavaScript auszuführen. Mit der Tastatur springst du per Tab in den Plot, mit den Pfeiltasten links und rechts gehst du die Punkte durch (oder die Segmente eines Donuts), Pos1 und Ende springen an die Enden, und Esc hebt die Auswahl auf, während eine Live Region jeden Punkt vorliest. Enter löst bei Area, Bar und Line Chart onDatumClick aus und wählt beim Donut ein Segment aus.
Flächen steigen auf, Linien werden gezeichnet und Segmente bauen sich im Kreis auf, wenn ein Diagramm zum ersten Mal in den sichtbaren Bereich scrollt. Ist im Betriebssystem reduzierte Bewegung eingestellt, erscheint sofort das fertige Diagramm (wie reduzierte Bewegung in React funktioniert).
Wie füge ich die Diagramme meinem Projekt hinzu?
Installier die, die du brauchst:
Die CLI kopiert die Diagramme nach components/ui, legt das Chart Kit als lib/chart-kit.tsx an, zusammen mit den Hooks und Helfern, die die Diagramme importieren, und installiert d3-scale, d3-shape und motion. Die Diagramme sind Pro-Komponenten (Preise). Einen Überblick über Libraries für Dashboards gibt dir der Vergleich der besten React Component Libraries für Dashboard-Apps, und die Kategorie Komponenten-Guides hat weitere Deep Dives zu einzelnen Komponenten, angefangen mit dem Guide zu React-Formularkomponenten.
Häufige Fragen
Welche Chart Library eignet sich am besten für React und Tailwind?
Wenn du shadcn/ui schon nutzt, ist dessen Chart-Komponente auf Recharts v3 die Wahl mit dem geringsten Aufwand, und Tremor bietet einen ähnlichen Tailwind-Look, ebenfalls auf Recharts. Wenn du Diagramme willst, die schon für Smartphones und Dark Mode gestaltet sind und deren Quellcode in deinem Repository liegt, sind die Charts von Wingo UI eine Option.
Wie bringe ich React Charts in den Dark Mode?
Nimm eine SVG-Chart-Library und gib jede Serienfarbe als CSS-Variable an, mit einem eigenen Wert im dunklen Theme statt einer automatischen Umkehrung. Canvas-Libraries wie Chart.js nehmen ihre Farben aus JavaScript-Optionen, also liest du die Token-Werte selbst aus und zeichnest beim Theme-Wechsel neu.
Gibt es eine Recharts-Alternative mit Tailwind?
Tremor und shadcn/ui nutzen Tailwind, laufen aber weiterhin auf Recharts. Die Charts von Wingo UI verzichten auf Recharts: SVG, gezeichnet mit d3-scale und d3-shape, gestylt mit Tailwind-Tokens und als Quellcode in dein Projekt kopiert.
Kann ich d3 mit React nutzen, ohne das DOM anzufassen?
Ja. Mit d3-scale rechnest du Werte in Pixel um, mit d3-shape baust du Path-Strings, und das SVG renderst du mit JSX. React verwaltet das DOM, d3 übernimmt nur die Berechnungen. Genau so arbeitet das Chart Kit von Wingo UI.
Sind die Charts von Wingo UI kostenlos?
Nein. Area, Bar, Line und Donut Chart sowie das Chart Kit sind Pro-Komponenten. Stand Oktober 2026 kostet Pro $8 im Monat, $80 im Jahr oder einmalig $150.
- Charts
- Tailwind CSS
- Dark Mode
- Dashboard
- React
