Recharts, Chart.js, Nivo, Victory, visx et ECharts comparés en construisant le même graphique en barres avec chacune, avec du code à copier et des tailles de bundle mesurées. Choisissez la bonne bibliothèque de graphiques React.
Pour la plupart des tableaux de bord React, Recharts est le démarrage le plus rapide et Chart.js offre un bundle plus léger dessiné sur canvas. Choisissez visx pour des designs entièrement sur mesure au poids minimal, Nivo pour des réglages par défaut soignés, Victory si vous ciblez aussi React Native, et ECharts pour des graphiques très volumineux ou complexes. Nous avons construit le même graphique avec chacune et l'avons mesuré.
En bref
Chaque bibliothèque ci-dessous dessine le même graphique en barres sur six mois à partir des mêmes données. Nous avons créé un bundle séparé pour chacune et mesuré le résultat, pour que le tableau des tailles compare des choses comparables. L'exemple Recharts tourne aussi en direct sur cette page.
Tout dépend du besoin. Recharts convient aux tableaux de bord classiques, Chart.js à de grandes quantités de données avec un petit bundle, visx aux designs sur mesure, et ECharts aux graphiques complexes et riches en données. Le tableau des tailles de cette page montre le coût de chacune.
Recharts est plus naturel en React car les graphiques sont des composants et produisent du SVG que vous pouvez styliser. Chart.js dessine sur canvas, gère bien un grand nombre de points et faisait moins de la moitié de la taille dans notre test.
Oui. Les six sont open source : Recharts, Chart.js, Nivo, Victory et visx sous licence MIT, et ECharts sous Apache 2.0.
Elles dessinent dans le navigateur et utilisent des effets ou des refs, le composant du graphique a donc besoin de "use client". Les données peuvent toujours être récupérées dans un Server Component et transmises en props.
Mesuré : un graphique en barres, minifié et compressé avec gzip (React non compté)
Leurs différences
Six mois de visites d'un site web. Chaque bibliothèque ci-dessous en tire le même graphique en barres.
Composé de composants qui se lisent comme le graphique : un axe x, un axe y, une infobulle, des barres. ResponsiveContainer lui fait occuper toute la largeur de son parent. Le graphique en direct à côté correspond à ce code.
Chart.js permet le tree-shaking, vous n'enregistrez donc que les éléments utilisés par le graphique. Il dessine sur un canvas, qui reste rapide avec des milliers de points mais nécessite son propre texte accessible.
Un seul composant avec de nombreuses props et des réglages par défaut élégants. ResponsiveBar a besoin d'un parent de hauteur définie.
Des composants SVG composables. La même API existe pour React Native (victory-native), ce qui aide quand le web et l'application partagent le code des graphiques.
Moins une bibliothèque de graphiques qu'un ensemble de briques : vous créez les échelles et dessinez les barres vous-même. Plus de code, un contrôle total, le bundle le plus léger de notre test.
Tout passe par un seul objet d'options. Importer echarts-for-react embarque tout ECharts, ce qui donne le plus gros bundle de cette page.
Importez depuis echarts/core et n'enregistrez que le graphique, les composants et le moteur de rendu utilisés. Dans notre test, cela a réduit le bundle d'environ la moitié.
Besoin d'un endroit où placer vos graphiques ? Partez de nos
Graphique en barres des visites mensuelles : janv. 1,200, févr. 1,650, mars 1,420, avr. 2,100, mai 2,480, juin 2,310
janv.
mars
avr.
mai
juin
Commencer gratuitement · Sans carte bancaire