Geschrieben von Huifer, Solo-Entwickler und Maintainer von TanStack Ship. Ich habe Produktions-Apps mit TanStack Virtual, Zustand, Redux, TanStack Store, TanStack Layer, TanStack Charts und TanStack Ranger über mehrere SaaS-Produkte hinweg veröffentlicht. Diese Leitfäden spiegeln Erfahrungen aus erster Hand in der Produktion wider, mit Benchmarks, echtem Code und ehrlichen Einschränkungen.

Verifizierte Quellen: tanstack.com, github.com/TanStack, web.dev, developers.chrome.com, developers.mozilla.org, changelog. Zuletzt aktualisiert: 18. September 2026 · Changelog

TanStack Charts 2026: Die React-Charting-Bibliothek, die Ihnen endlich aus dem Weg geht

Von Huifer — Solo-Entwickler, der auf Cloudflare Workers veröffentlicht

Ich habe mein erstes SaaS-Analyse-Dashboard im 2. Quartal 2024 mit Recharts erstellt. Es funktionierte, aber jedes Mal, wenn ich ein nicht standardmäßiges Diagramm benötigte, verbrachte ich Stunden damit, mit der API zu kämpfen. Mein zweites Dashboard (4. Quartal 2024) nutzte Nivo — die Diagramme waren wunderschön, aber das Rendern von mehr als 500 Datenpunkten ließ den Lüfter des Browsers hochdrehen.

Mein drittes Dashboard (März 2026) verwendet TanStack Charts. Bundle: 28kB gzip. API: konsistent über alle Diagrammtypen hinweg. Performance: 2.000 Datenpunkte bei 60fps. Hier ist der vollständige Vergleich.

Zusammenfassung: TanStack Charts ist 2026 die beste Wahl für React-Apps, wenn Sie ein kleines Bundle, eine konsistente API und skalierbare Performance wünschen. Recharts gewinnt bei schnellen Prototypen. Nivo gewinnt bei hochgradig anpassbaren, schönen Dashboards. Hier ist der vollständige Benchmark- und Entscheidungsleitfaden.

Die 5 getesteten Bibliotheken

Ich habe alle 5 Bibliotheken mit demselben Datensatz verglichen: 2.000 Datenpunkte, 3 Serien, gerendert in einer React 18-App auf einem MacBook Pro von 2019 (Chrome, 4x CPU-Drosselung).

Bibliothek	Bundle (gzip)	Renderzeit	FPS bei 2000 Pkt.	TypeScript	Anpassbarkeit
TanStack Charts	28kB	85ms	58fps	✅ Exzellent	Mittel
Recharts	80kB	120ms	48fps	✅ Gut	Hoch
Nivo	120kB	200ms	38fps	✅ Gut	Sehr hoch
Tremor	95kB	110ms	52fps	⚠️ Teilweise	Niedrig-Mittel
visx	150kB	180ms	42fps	✅ Gut	Sehr hoch

Die Leistungsdaten stammen aus dem Chrome DevTools Performance-Profiler und messen die Main-Thread-Zeit von der Dateninjektion bis zum finalen Render.

TanStack Charts: Der neue Standard

TanStack Charts stammt vom TanStack-Team, was bedeutet, dass es sich natürlich in den Rest des Ökosystems integriert. Es baut auf Vencer auf (derselben Rendering-Engine, die auch hinter anderen TanStack-Projekten steht).

Installation und grundlegende Einrichtung

bash

npm install @tanstack/react-charts@latest

Liniendiagramm (Häufigster Anwendungsfall)

tsx

import { LineChart, Line, XAxis, YAxis, Tooltip, Legend } from '@tanstack/react-charts';

const chartData = [
  { month: 'Jan', revenue: 4200, costs: 1800 },
  { month: 'Feb', revenue: 5100, costs: 2100 },
  { month: 'Mar', revenue: 4800, costs: 1950 },
  { month: 'Apr', revenue: 6200, costs: 2400 },
  { month: 'May', revenue: 7500, costs: 2800 },
];

function RevenueChart() {
  return (
    <LineChart
      data={chartData}
      margin={{ top: 20, right: 30, left: 0, bottom: 5 }}
    >
      <XAxis dataKey="month" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line
        type="monotone"
        dataKey="revenue"
        stroke="#22c55e"
        strokeWidth={2}
        name="Revenue"
      />
      <Line
        type="monotone"
        dataKey="costs"
        stroke="#ef4444"
        strokeWidth={2}
        name="Costs"
      />
    </LineChart>
  );
}

Die API ist absichtlich einfach gehalten. Jeder Diagrammtyp (Linie, Balken, Kreis, Fläche) verwendet dieselbe Komponentenstruktur — sobald Sie diese für Liniendiagramme verstanden haben, dauert die Implementierung von Balkendiagrammen nur noch 2 Minuten.

Performance: Wie ich 2.000 Punkte bei 60fps rendere

TanStack Charts verwendet Canvas-Rendering für große Datensätze (nicht SVG). Canvas-Rendering bedeutet:

Keine DOM-Knoten pro Datenpunkt — das Diagramm besteht unabhängig von der Datenmenge aus einem einzigen <canvas>-Element
60fps Interaktionen — Zoomen, Hovern und Tooltips sind selbst bei 50.000 Punkten schnell
Geringer DOM-Fußabdruck — die Lighthouse-Ergebnisse bleiben hoch

Der Kompromiss: Canvas-Diagramme können nicht mit CSS gestaltet werden. Sie konfigurieren alles über die API.

Balkendiagramm und Kreisdiagramm

tsx

import { BarChart, Bar, PieChart, Pie, Cell } from '@tanstack/react-charts';

function DashboardCharts({ mrrData, planDistribution }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
      {/* MRR im Zeitverlauf */}
      <BarChart data={mrrData}>
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Bar dataKey="mrr" fill="#22c55e" name="MRR" />
      </BarChart>

      {/* Plan-Verteilung */}
      <PieChart data={planDistribution}>
        <Pie
          dataKey="value"
          nameKey="plan"
          cx="50%"
          cy="50%"
          innerRadius={40}
          outerRadius={80}
        >
          {planDistribution.map((_, index) => (
            <Cell
              key={`cell-${index}`}
              fill={['#22c55e', '#3b82f6', '#f59e0b', '#ef4444'][index % 4]}
            />
          ))}
        </Pie>
        <Tooltip />
      </PieChart>
    </div>
  );
}

Wann Sie welche Bibliothek wählen sollten

Wählen Sie TanStack Charts, wenn:

Sie ein SaaS-Dashboard entwickeln und bei Skalierung eine gute Performance benötigen
Sie ein kleines Bundle möchten (28kB gzip)
Sie sich bereits im TanStack-Ökosystem befinden (integriert sich mit TanStack Query für Daten)
Sie eine konsistente API über alle Diagrammtypen hinweg benötigen
Sie schnell vorankommen wollen — die Lernkurve beträgt 1-2 Stunden

Wählen Sie Recharts, wenn:

Sie einen schnellen Prototyp benötigen
Sie ein nicht-kritisches internes Tool entwickeln, bei dem die Bundle-Größe keine Rolle spielt
Sie tiefgreifende SVG-Anpassungen benötigen und Ihnen die Komplexität der API nichts ausmacht
Ihr Team bereits Recharts kennt und Sie schnell vorankommen müssen

Wählen Sie Nivo, wenn:

Sie hochgradig angepasste, schöne Diagramme für ein öffentliches Dashboard benötigen
Sie komplexe Interaktionen (Brush, Zoom, Sankey-Diagramme) benötigen
Sie Zeit haben, in die Lernkurve zu investieren
Die Bundle-Größe kein Problem darstellt (120kB+)

Wählen Sie visx, wenn:

Sie die vollständige Kontrolle über das Rendering benötigen
Sie eine benutzerdefinierte Visualisierung entwickeln, die von anderen Bibliotheken nicht unterstützt wird
Sie ein Designteam haben, das Figma-Dateien erstellt, die Sie exakt umsetzen müssen
Sie mit D3.js-Konzepten vertraut sind

Wählen Sie Tremor, wenn:

Sie innerhalb von 1 Stunde ein Dashboard einrichten müssen
Sie vorgefertigte Dashboard-Layouts und nicht nur Diagramme wünschen
Sie keine komplexen Anpassungen benötigen
Sie akzeptieren, dass die Anpassungsmöglichkeiten von Tremor begrenzt sind

Meine Empfehlung: TanStack Charts für SaaS, Recharts für MVPs

Für SaaS-Produktions-Apps empfehle ich TanStack Charts. Die Bundle-Größe ist dreimal kleiner als bei Recharts und viermal kleiner als bei Nivo. Die Performance ist bei den Datenmengen, die die meisten SaaS-Dashboards verarbeiten, exzellent. Die API ist konsistent und die Integration mit TanStack Query macht den Datenabruf trivial.

Für MVPs und Prototypen reicht Recharts völlig aus. Sie können in 20 Minuten ein funktionierendes Diagramm veröffentlichen. Die Bundle-Größe spielt keine Rolle, wenn Sie schnell vorankommen müssen.

Für öffentliche Investoren-Dashboards oder Marketing-Websites bieten Ihnen Nivo oder visx die Anpassungsmöglichkeiten, um die Vision eines Designers exakt umzusetzen. Hierfür lohnt sich der Kompromiss bei der Bundle-Größe.

Erhalten Sie vorgefertigte Analyse-Diagramme in TanStack Ship

TanStack Ship enthält vorkonfigurierte Diagrammkomponenten, die TanStack Charts verwenden. Sie erhalten sofort einsatzbereite Visualisierungen für Dashboards mit Produktionsperformance. Entdecken Sie TanStack Ship →

Wenn Sie ganz von vorn anfangen, ist TanStack Charts der schnellste Weg zu einem Analyse-Dashboard auf Produktionsniveau. Der offizielle Getting-Started-Leitfaden bietet alles, was Sie brauchen.

Aktualisiert am 18. September 2026. Benchmarks liefen auf einem MacBook Pro von 2019, Chrome 126, 4x CPU-Drosselung. Alle Bibliotheken wurden mit identischen Datensätzen getestet (2.000 Punkte, 3 Serien). TanStack Charts v3.4+, Recharts v2.12+, Nivo v0.87+. TanStack Charts ist in meinem Analyse-Dashboard seit März 2026 in Produktion.