Recharts, Chart.js, Nivo, Victory, visx y ECharts comparadas creando el mismo gráfico de barras en cada una, con código para copiar y tamaños de bundle medidos. Elige la librería de gráficos para React adecuada.
Para la mayoría de los dashboards en React, Recharts es el comienzo más rápido y Chart.js ofrece un bundle más pequeño dibujado en canvas. Elige visx para diseños totalmente personalizados con el menor tamaño, Nivo para valores por defecto pulidos, Victory si también apuntas a React Native y ECharts para gráficos muy grandes o complejos. Creamos el mismo gráfico en cada una y lo medimos.
Versión corta
Cada librería de abajo dibuja el mismo gráfico de barras de seis meses con los mismos datos. Empaquetamos cada una por separado y medimos el resultado, así que la tabla de tamaños compara cosas equivalentes. El ejemplo de Recharts también funciona en vivo en esta página.
Depende de la tarea. Recharts encaja en dashboards típicos, Chart.js en muchos datos con un bundle pequeño, visx en diseños a medida y ECharts en gráficos complejos con muchos datos. La tabla de tamaños de aquí muestra el coste de cada una.
Recharts resulta más natural en React porque los gráficos son componentes y se renderizan como SVG que puedes estilizar. Chart.js dibuja en canvas, maneja bien muchos puntos y en nuestra prueba ocupó menos de la mitad.
Sí. Las seis son de código abierto: Recharts, Chart.js, Nivo, Victory y visx con licencia MIT, y ECharts con Apache 2.0.
Dibujan en el navegador y usan effects o refs, así que el componente del gráfico necesita "use client". Los datos se pueden seguir obteniendo en un Server Component y pasarse como props.
Medido: un gráfico de barras, minificado y con gzip (sin contar React)
En qué se diferencian
Seis meses de visitas a un sitio web. Cada librería de abajo dibuja con ellos el mismo gráfico de barras.
Se compone con componentes que se leen como el propio gráfico: un eje x, un eje y, un tooltip, barras. ResponsiveContainer hace que ocupe todo el ancho de su padre. El gráfico en vivo de al lado es este código.
Chart.js admite tree-shaking, así que registras solo las piezas que usa el gráfico. Dibuja en un canvas, que sigue siendo rápido con miles de puntos pero necesita su propio texto accesible.
Un componente con muchas props y valores por defecto con buen aspecto. ResponsiveBar necesita un padre con una altura definida.
Componentes SVG componibles. La misma API existe para React Native (victory-native), lo que ayuda cuando la web y la app comparten código de gráficos.
Más que una librería de gráficos, son piezas de construcción: tú creas las escalas y dibujas las barras. Más código, control total y el bundle más pequeño de nuestra prueba.
Todo es un único objeto de opciones. Importar echarts-for-react arrastra todo ECharts, que es el bundle más grande de aquí.
Importa desde echarts/core y registra solo el gráfico, los componentes y el renderizador que uses. En nuestra prueba eso redujo el bundle aproximadamente a la mitad.
¿Necesitas dónde poner los gráficos? Empieza con nuestros
Gráfico de barras de visitas mensuales: ene 1,200, feb 1,650, mar 1,420, abr 2,100, may 2,480, jun 2,310
Ene
Mar
Abr
May
Jun
Empieza gratis · Sin tarjeta de crédito