Recharts, Chart.js, Nivo, Victory, visx en ECharts vergeleken door in elk dezelfde staafgrafiek te bouwen, met kopieerbare code en gemeten bundelgroottes. Kies de juiste React chart library.
Voor de meeste React-dashboards is Recharts de snelste start en geeft Chart.js een kleinere bundel die op canvas tekent. Kies visx voor volledig eigen ontwerpen met de kleinste omvang, Nivo voor verzorgde standaardinstellingen, Victory als u ook React Native bedient, en ECharts voor zeer grote of complexe grafieken. We bouwden in elk dezelfde grafiek en hebben die gemeten.
De korte versie
Elke library hieronder tekent dezelfde staafgrafiek over zes maanden uit dezelfde data. We hebben ze elk apart gebundeld en het resultaat gemeten, zodat de groottetabel appels met appels vergelijkt. Het Recharts-voorbeeld draait ook live op deze pagina.
Dat hangt af van de taak. Recharts past bij gewone dashboards, Chart.js bij veel data met een kleine bundel, visx bij ontwerpen op maat en ECharts bij complexe grafieken met veel data. De groottetabel hier toont wat elk kost.
Recharts voelt natuurlijker in React omdat grafieken componenten zijn en als SVG renderen die u kunt stylen. Chart.js tekent op canvas, kan goed met veel punten overweg en was in onze test minder dan half zo groot.
Ja. Alle zes zijn open source: Recharts, Chart.js, Nivo, Victory en visx onder MIT, en ECharts onder Apache 2.0.
Ze tekenen in de browser en gebruiken effects of refs, dus de grafiekcomponent heeft "use client" nodig. De data kan nog steeds in een Server Component worden opgehaald en als props worden doorgegeven.
Gemeten: één staafgrafiek, geminificeerd en gegzipt (React niet meegeteld)
Hoe ze verschillen
Zes maanden websitebezoeken. Elke library hieronder tekent er dezelfde staafgrafiek van.
Opgebouwd uit componenten die lezen als de grafiek zelf: een x-as, een y-as, een tooltip, staven. ResponsiveContainer laat hem de breedte van zijn parent vullen. De live grafiek ernaast is deze code.
Chart.js is tree-shakeable, dus u registreert alleen de onderdelen die de grafiek gebruikt. Het tekent op een canvas, dat snel blijft met duizenden punten maar zijn eigen toegankelijke tekst nodig heeft.
Eén component met veel props en mooie standaardinstellingen. ResponsiveBar heeft een parent met een vaste hoogte nodig.
Samenstelbare SVG-componenten. Dezelfde API bestaat voor React Native (victory-native), wat helpt als web en app grafiekcode delen.
Niet zozeer een chart library als wel bouwstenen: u maakt de scales en tekent de staven zelf. Meer code, volledige controle, de kleinste bundel in onze test.
Alles zit in één option-object. Door echarts-for-react te importeren haalt u heel ECharts binnen, wat hier de grootste bundel is.
Importeer uit echarts/core en registreer alleen de grafiek, componenten en renderer die u gebruikt. In onze test halveerde dat ongeveer de bundel.
Een plek nodig voor de grafieken? Begin met onze
Staafgrafiek van maandelijkse bezoeken: jan 1,200, feb 1,650, mrt 1,420, apr 2,100, mei 2,480, jun 2,310
jan
mrt
apr
mei
jun
Gratis beginnen · Geen creditcard nodig