# React Charts Tailwind: 4 Charts und ein Kit für jedes Theme > React Charts Tailwind-konform: Area, Bar, Line und Donut Chart plus ein Chart Kit auf d3-scale und d3-shape, lesbar in Light und Dark Mode und am Smartphone. - 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: 11 Min. - Kanonische URL: https://wingo-ui.com/de/blog/react-charts-tailwind - Englische Fassung: https://wingo-ui.com/blog/react-charts-tailwind ## Kurz gesagt Für React Charts in einer Tailwind-App nimmst du SVG-Diagramme, deren Farben CSS-Variablen mit eigenen Werten für Light und Dark Mode sind, deren Anzeige auf Touchscreens über dem Finger fixiert wird und die eine Datentabelle für Screenreader mitliefern. shadcn/ui Charts und Tremor bringen Tailwind-Theming auf Basis von Recharts; Area, Bar, Line und Donut Chart von Wingo UI zeichnen direkt mit d3-scale und d3-shape, und mit dem gemeinsamen Chart Kit baust du eigene Diagramme. 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](https://wingo-ui.com/components/area-chart), [Bar Chart](https://wingo-ui.com/components/bar-chart), [Line Chart](https://wingo-ui.com/components/line-chart), [Donut Chart](https://wingo-ui.com/components/donut-chart) und das [Chart Kit](https://wingo-ui.com/components/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: 1. **Farben als Tokens.** Jede Serienfarbe ist eine CSS-Variable, folgt also deinem Theme wie `bg-card`, und niemand hardcodet `#8884d8` in einer Komponente. 2. **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. 3. **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. 4. **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. 5. **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. 6. **Zahlenformate.** Währungen, kompakte Ticks („$128K“) und Datumsangaben laufen über `Intl`, mit einem `locale`-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. | Option | Was es ist | Engine | Theming | Lizenz | |---|---|---|---|---| | [shadcn/ui Chart](https://ui.shadcn.com/docs/components/chart) | Quellcode-Komponenten, die du mit der shadcn CLI kopierst | Recharts v3 | CSS-Variablen im Stil von `--chart-1` oder eine Config-Farbe mit den Keys `light` und `dark` | MIT | | [Tremor](https://www.tremor.so/) | Chart- und Dashboard-Komponenten, per Copy-and-paste oder als Paket `@tremor/react` (3.18.7, veröffentlicht am 13. Januar 2025) | Recharts | Tailwind-Klassen | Apache 2.0 | | [Recharts](https://github.com/recharts/recharts) 3.10.1 | Zusammensetzbare React-Chart-Komponenten | React und D3 (d3-scale, d3-shape und weitere über `victory-vendor`) | Props pro Element | MIT | | [Chart.js](https://www.chartjs.org/docs/latest/) 4.5.1 | Chart-Library, die du selbst in React einbindest | HTML5 Canvas | Farben in JavaScript-Optionen; Tailwind-Klassen können das Canvas nicht stylen | MIT | | [Wingo UI Charts](https://wingo-ui.com/components/area-chart) | Quellcode-Komponenten, `npx wingo-ui@latest add area-chart` | SVG, gezeichnet mit d3-scale und d3-shape, motion für Animationen | `--series-1` bis `--series-8` mit eigenen Dark-Werten, Tones wie `"success"` | Kommerziell (Pro-Plan) | Recharts ist eine solide Standardwahl, und sowohl shadcn/ui als auch Tremor bauen darauf auf. Seit Version 3.0 ist laut den [Release Notes](https://github.com/recharts/recharts/releases/tag/v3.0.0) 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 ``-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](https://d3js.org/d3-shape) 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](https://wingo-ui.com/components/area-chart) kann alle drei über ein einziges `type`-Prop, und beim Umschalten gleiten die Bänder in ihre neue Form. ```bash npx wingo-ui@latest add area-chart ``` ```tsx import { AreaChart } from "@/components/ui/area-chart"; const data = [ { month: "2026-07", direct: 41460, online: 28700, partners: 18070 }, { month: "2026-08", direct: 38030, online: 27300, partners: 15600 }, { month: "2026-09", direct: 48920, online: 36400, partners: 22130 }, ]; export function RevenueByChannel() { return ( ); } ``` 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](https://wingo-ui.com/components/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: ```tsx import { BarChart } from "@/components/ui/bar-chart"; export function CashFlow({ data }: { data: { month: string; change: number }[] }) { return ( ((row.change as number) < 0 ? "danger" : "success")} showValues valueFormat="currency" currency="USD" locale="en-US" label="Monatliche Veränderung des Cashflows, 2026" description="Drei Monate hatten einen negativen Cashflow." /> ); } ``` `"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. > Live-Demo (Bar chart): Fahr über einen Monat oder tipp ihn an, um beide Serien abzulesen, wechsle im Header zwischen Grouped, Stacked und 100% und klick einen Legendeneintrag an, um eine Serie auszublenden. Probier sie unter [Bar chart](https://wingo-ui.com/components/bar-chart) aus und installier sie mit `npx wingo-ui@latest add bar-chart`. ## 3. 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](https://wingo-ui.com/components/line-chart) wird eine Serie mit `dashed: true` mit 70% Deckkraft gezeichnet und bekommt in der Anzeige eine gedämpfte Zeile. ```tsx import { LineChart } from "@/components/ui/line-chart"; const data = [ { month: "2026-07", revenue: 106300, lastYear: 91200 }, { month: "2026-08", revenue: 97500, lastYear: 88400 }, { month: "2026-09", revenue: 128450, lastYear: 104700 }, ]; export function RevenueTrend() { return ( ); } ``` `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. > Live-Demo (Line chart): Schalte im Header auf Compare 2025, um die gestrichelte Linie für das Vorjahr einzublenden, und fahr dann mit der Maus, per Tippen oder seitlichem Ziehen über den Plot, um beide Jahre in jedem Monat abzulesen. Probier sie unter [Line chart](https://wingo-ui.com/components/line-chart) aus und installier sie mit `npx wingo-ui@latest add line-chart`. ## 4. 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](https://wingo-ui.com/components/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. ```tsx import { DonutChart } from "@/components/ui/donut-chart"; const channels = [ { id: "direct", label: "Direktvertrieb", value: 48920 }, { id: "online", label: "Onlineshop", value: 36400 }, { id: "partners", label: "Partner", value: 22130 }, { id: "tenders", label: "Öffentliche Ausschreibungen", value: 13600 }, ]; export function ChannelMix() { return ; } ``` 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. > Live-Demo (Donut chart): Fahr über ein Segment oder tipp es an, um es in der Mitte abzulesen, klick es an, damit es ausgewählt bleibt, und wechsle im Header den Monat, um die Segmente gleiten zu sehen. Probier sie unter [Donut chart](https://wingo-ui.com/components/donut-chart) aus und installier sie mit `npx wingo-ui@latest add donut-chart`. ## 5. Chart Kit: Wie baue ich einen Diagrammtyp, der nicht in der Liste steht? Nimm das [Chart Kit](https://wingo-ui.com/components/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: ```tsx import { ChartContainer, ChartSvg, ChartTooltip, ChartInspectLayer, chartLayout, niceScale, valueDomain, useChartInspect, formatChartValue, } from "@/lib/chart-kit"; const data = [ { month: "Jul", revenue: 106300 }, { month: "Aug", revenue: 97500 }, { month: "Sep", revenue: 128450 }, ]; function Bars({ width, height }: { width: number; height: number }) { const layout = chartLayout({ width, height, showYAxis: false }); const { scale: y } = niceScale(valueDomain(data.map((d) => d.revenue)), [layout.bottom, layout.top]); const step = layout.innerWidth / data.length; const positions = data.map((_, i) => layout.left + step * (i + 0.5)); const inspect = useChartInspect({ positions }); const i = inspect.activeIndex; return ( <> {data.map((d, index) => ( ))} ); } export function RevenueBars() { return ( {(size) => } ); } ``` `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](https://wingo-ui.com/components/sparkline) und [Gauge](https://wingo-ui.com/components/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](https://wingo-ui.com/de/blog/tailwind-v4-dark-mode) 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](https://wingo-ui.com/de/blog/nextjs-admin-dashboard-tutorial) 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](https://wingo-ui.com/de/blog/prefers-reduced-motion-react)). ## Wie füge ich die Diagramme meinem Projekt hinzu? Installier die, die du brauchst: ```bash npx wingo-ui@latest add area-chart bar-chart line-chart donut-chart ``` 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](https://wingo-ui.com/de/pricing)). Einen Überblick über Libraries für Dashboards gibt dir der [Vergleich der besten React Component Libraries für Dashboard-Apps](https://wingo-ui.com/de/blog/best-react-component-library-for-dashboard), und die [Kategorie Komponenten-Guides](https://wingo-ui.com/de/blog/category/components) hat weitere Deep Dives zu einzelnen Komponenten, angefangen mit dem [Guide zu React-Formularkomponenten](https://wingo-ui.com/de/blog/react-form-components-guide). ## Komponenten in diesem Artikel - [Area chart](https://wingo-ui.com/components/area-chart) (Pro): Volumes over time as filled areas: overlapping gradients, stacked bands for parts of a total, or 100% stacked shares. Installation: `npx wingo-ui@latest add area-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` - [Line chart](https://wingo-ui.com/components/line-chart) (Pro): Trends over time as smooth lines, with a crosshair readout of every series, a dashed comparison period, target lines and direct end labels. Installation: `npx wingo-ui@latest add line-chart` - [Donut chart](https://wingo-ui.com/components/donut-chart) (Pro): Parts of a whole as a donut or pie, with the total in the middle, a legend with values and shares, and a selectable slice. Installation: `npx wingo-ui@latest add donut-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` ## 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. --- Quelle: https://wingo-ui.com/de/blog/react-charts-tailwind