Recharts, Chart.js, Nivo, Victory, visx i ECharts porównane przez zbudowanie w każdej tego samego wykresu słupkowego, z kodem do skopiowania i zmierzonym rozmiarem bundla. Wybierz właściwą bibliotekę wykresów dla React.
W większości dashboardów React najszybszym startem jest Recharts, a Chart.js daje mniejszy bundle rysowany na canvasie. Wybierz visx dla w pełni własnych projektów przy najmniejszym rozmiarze, Nivo dla dopracowanych ustawień domyślnych, Victory, jeśli celujesz też w React Native, i ECharts dla bardzo dużych lub złożonych wykresów. Zbudowaliśmy ten sam wykres w każdej z nich i go zmierzyliśmy.
Krótka wersja
Każda biblioteka poniżej rysuje ten sam wykres słupkowy z sześciu miesięcy na podstawie tych samych danych. Każdą zbudowaliśmy osobno i zmierzyliśmy wynik, więc tabela rozmiarów porównuje porównywalne rzeczy. Przykład z Recharts działa też na żywo na tej stronie.
To zależy od zadania. Recharts pasuje do typowych dashboardów, Chart.js do dużej ilości danych przy małym bundlu, visx do projektów szytych na miarę, a ECharts do złożonych wykresów z dużą ilością danych. Tabela rozmiarów pokazuje koszt każdej z nich.
Recharts jest bardziej naturalny w React, bo wykresy są komponentami i renderują się jako SVG, które możesz stylować. Chart.js rysuje na canvasie, dobrze radzi sobie z wieloma punktami i w naszym teście był ponad dwa razy mniejszy.
Tak. Wszystkie sześć to open source: Recharts, Chart.js, Nivo, Victory i visx na licencji MIT, a ECharts na licencji Apache 2.0.
Rysują w przeglądarce i używają efektów lub refów, więc komponent wykresu potrzebuje "use client". Dane nadal można pobrać w Server Component i przekazać niżej jako propsy.
Zmierzone: jeden wykres słupkowy, zminifikowany i skompresowany gzipem (bez React)
Czym się różnią
Sześć miesięcy wizyt na stronie. Każda biblioteka poniżej rysuje z nich ten sam wykres słupkowy.
Składany z komponentów, które czyta się jak sam wykres: oś x, oś y, tooltip, słupki. ResponsiveContainer sprawia, że wykres wypełnia szerokość rodzica. Wykres na żywo obok to właśnie ten kod.
Chart.js obsługuje tree shaking, więc rejestrujesz tylko elementy używane przez wykres. Rysuje na canvasie, który pozostaje szybki przy tysiącach punktów, ale potrzebuje własnego dostępnego tekstu.
Jeden komponent z wieloma propsami i ładnymi ustawieniami domyślnymi. ResponsiveBar potrzebuje rodzica z ustawioną wysokością.
Składane komponenty SVG. To samo API istnieje dla React Native (victory-native), co pomaga, gdy strona i aplikacja współdzielą kod wykresów.
To nie tyle biblioteka wykresów, co zestaw klocków: sam tworzysz skale i rysujesz słupki. Więcej kodu, pełna kontrola, najmniejszy bundle w naszym teście.
Wszystko to jeden obiekt opcji. Import echarts-for-react wciąga całe ECharts, co daje tu największy bundle.
Importuj z echarts/core i rejestruj tylko używany wykres, komponenty i renderer. W naszym teście zmniejszyło to bundle mniej więcej o połowę.
Potrzebujesz miejsca na wykresy? Zacznij od naszych
Wykres słupkowy miesięcznych wizyt: sty 1,200, lut 1,650, mar 1,420, kwi 2,100, maj 2,480, cze 2,310
Sty
Mar
Kwi
Maj
Cze
Zacznij za darmo · Bez karty kredytowej