Recharts, Chart.js, Nivo, Victory, visx und ECharts im Vergleich, indem wir in jeder Library dasselbe Balkendiagramm bauen, mit Code zum Kopieren und gemessenen Bundle-Größen. Finde die passende React Chart Library.
Für die meisten React-Dashboards ist Recharts der schnellste Einstieg, und Chart.js liefert ein kleineres Bundle, das auf Canvas zeichnet. Nimm visx für komplett eigene Designs bei kleinster Größe, Nivo für ausgefeilte Standardeinstellungen, Victory, wenn du auch React Native bedienst, und ECharts für sehr große oder komplexe Diagramme. Wir haben in jeder Library dasselbe Diagramm gebaut und gemessen.
Kurzfassung
Jede Library unten zeichnet dasselbe Balkendiagramm über sechs Monate aus denselben Daten. Wir haben jede einzeln gebündelt und das Ergebnis gemessen, sodass die Größentabelle Gleiches mit Gleichem vergleicht. Das Recharts-Beispiel läuft außerdem live auf dieser Seite.
Das hängt von der Aufgabe ab. Recharts passt zu typischen Dashboards, Chart.js zu vielen Daten bei kleinem Bundle, visx zu individuellen Designs und ECharts zu komplexen, datenintensiven Diagrammen. Die Größentabelle hier zeigt, was jede davon kostet.
Recharts fühlt sich in React natürlicher an, weil Diagramme Komponenten sind und als SVG gerendert werden, das du stylen kannst. Chart.js zeichnet auf Canvas, kommt gut mit vielen Punkten zurecht und war in unserem Test weniger als halb so groß.
Ja. Alle sechs sind Open Source: Recharts, Chart.js, Nivo, Victory und visx unter MIT, ECharts unter Apache 2.0.
Sie zeichnen im Browser und nutzen Effects oder Refs, daher braucht die Diagrammkomponente "use client". Die Daten können trotzdem in einer Server Component geladen und als Props weitergegeben werden.
Gemessen: ein Balkendiagramm, minifiziert und gzip-komprimiert (ohne React)
Worin sie sich unterscheiden
Sechs Monate Website-Besuche. Jede Library unten zeichnet daraus dasselbe Balkendiagramm.
Aus Komponenten zusammengesetzt, die sich wie das Diagramm lesen: eine x-Achse, eine y-Achse, ein Tooltip, Balken. ResponsiveContainer lässt es die Breite des Elternelements ausfüllen. Das Live-Diagramm daneben ist genau dieser Code.
Chart.js ist tree-shakeable, du registrierst also nur die Teile, die das Diagramm nutzt. Es zeichnet auf ein Canvas, das auch bei Tausenden Punkten schnell bleibt, aber eigenen barrierefreien Text braucht.
Eine Komponente mit vielen Props und gut aussehenden Standardeinstellungen. ResponsiveBar braucht ein Elternelement mit fester Höhe.
Kombinierbare SVG-Komponenten. Dieselbe API gibt es für React Native (victory-native), was hilft, wenn Web und App Diagrammcode teilen.
Weniger eine Chart Library als ein Baukasten: Du erstellst die Skalen und zeichnest die Balken selbst. Mehr Code, volle Kontrolle, kleinstes Bundle in unserem Test.
Alles steckt in einem Options-Objekt. Der Import von echarts-for-react zieht das gesamte ECharts mit, das ist hier das größte Bundle.
Importiere aus echarts/core und registriere nur das Diagramm, die Komponenten und den Renderer, die du nutzt. In unserem Test hat das das Bundle etwa halbiert.
Brauchst du einen Platz für die Diagramme? Starte mit unseren
Balkendiagramm der monatlichen Besuche: Jan 1,200, Feb 1,650, Mär 1,420, Apr 2,100, Mai 2,480, Jun 2,310
Jan
Mär
Apr
Mai
Jun
Kostenlos starten · Keine Kreditkarte nötig