Librerías de gráficos en JavaScript: Chart.js vs D3 vs Recharts (2026)

Necesitas añadir un gráfico a tu proyecto. Buscas en npm y ves tres nombres que se repiten en cada tutorial: Chart.js, D3.js y Recharts. Las tres suman millones de descargas semanales y miles de estrellas en GitHub. Y ningún artículo te dice cuál coger sin venderte las tres como «la mejor opción».

Te ahorro el rodeo: son herramientas distintas para necesidades distintas. Aquí tienes cuál encaja con cada proyecto, con datos reales de npm y Bundlephobia de septiembre de 2026.

Tabla comparativa rápida

Criterio	Chart.js	D3.js	Recharts
Versión actual	4.5	7.9	3.10
Peso (min + gzip)	~68 KB	~92 KB (bundle completo, modular)	~152 KB
Descargas/semana en npm	~14 M	~24 M	~67 M
Dependencia de framework	Ninguna	Ninguna	Requiere React
Curva de aprendizaje	Baja	Alta	Media
Tipos de gráfico incluidos	8 tipos	Ilimitados (a mano)	~15 tipos
Renderizado	Canvas	SVG / Canvas / DOM	SVG
Licencia	MIT	ISC (equivalente a MIT)	MIT
Mejor para	Dashboards sencillos	Visualizaciones a medida	Apps React

Ojo con leer las descargas como popularidad directa. Recharts y D3 inflan su cifra porque viajan como dependencia dentro de otras librerías y kits de componentes.

Chart.js: rápido y sin complicaciones

Chart.js es la librería de gráficos de referencia fuera de React: unos 14 millones de descargas semanales en npm. No necesita ningún framework. Funciona con un elemento <canvas> y un objeto de configuración.

En diez minutos tienes un gráfico de barras o de líneas funcionando. Esa es su mayor ventaja y también su límite. Cuando necesitas algo que no está entre sus ocho tipos incluidos, empiezas a pelearte con la API.

Pros de Chart.js

• API de configuración sencilla: un objeto y ya tienes el gráfico.
• Documentación clara, con ejemplos para cada tipo.
• Funciona en cualquier proyecto sin dependencias externas.
• La más ligera de las tres: unos 68 KB comprimida.
• Plugins de la comunidad para ampliar tipos de gráfico.

Contras de Chart.js

• Renderiza en <canvas>: más difícil de inspeccionar y de estilizar con CSS.
• La personalización avanzada exige escribir plugins propios.
• Si importas chart.js/auto cargas todo. Para aligerar, importa solo los controladores que uses y regístralos con Chart.register().
• Para visualizaciones complejas o a medida, te quedas corto rápido.

Precio: gratis, MIT. Web: chartjs.org

Caso de uso ideal: panel de analíticas en una web estática, dashboard interno en Laravel o Rails, o una visualización rápida sin personalización extrema.

D3.js: potencia total, curva empinada

D3.js no es una librería de gráficos. Es una librería de visualización de datos de bajo nivel. Te da las primitivas (escalas, ejes, proyecciones, manipulación de SVG) y tú construyes lo que quieras. Por eso es la herramienta más potente del ecosistema y también la más exigente.

Redacciones como The New York Times o el Financial Times la usan para sus infografías interactivas. Cuando necesitas una visualización que no existe en ningún catálogo, D3 es la opción real. Sus 24 millones de descargas semanales vienen en buena parte de las librerías que la usan por dentro.

Pros de D3.js

• Flexibilidad absoluta: puedes crear cualquier visualización.
• Arquitectura modular: importas solo lo que necesitas (d3-scale, d3-array…).
• SVG nativo: inspección en DevTools, estilos CSS y mejor accesibilidad.
• Ecosistema enorme de ejemplos y notebooks de Observable.

Contras de D3.js

• Un gráfico de barras sencillo te lleva 40-60 líneas de código.
• La manipulación directa del DOM choca con el virtual DOM de React.
• Curva de aprendizaje alta: selecciones, escalas y joins de datos.
• No es la opción si quieres «un gráfico funcionando esta tarde».

Precio: gratis, licencia ISC. Web: d3js.org

Caso de uso ideal: visualizaciones interactivas a medida, periodismo de datos, mapas de calor, grafos de red o cualquier gráfico que no exista en un catálogo estándar.

Truco para usar D3 con React sin conflictos: usa los módulos que no tocan el DOM (d3-scale, d3-array) directamente en JSX. Para los que sí lo tocan (d3-selection, d3-axis), asigna un ref y llama a D3 dentro de useEffect.

Recharts: qué es y por qué domina en React

Recharts es una librería de gráficos para React, gratuita y de código abierto. Usa módulos matemáticos de D3 por debajo, pero no te obliga a tocarlos. Tú declaras el gráfico con componentes JSX como <LineChart> o <BarChart> y ella se encarga de dibujarlo en SVG.

Con unos 67 millones de descargas semanales, supera a Chart.js y D3 juntas. Parte de esa cifra llega porque shadcn/ui y Tremor la usan como base de sus componentes de gráficos. Eso la ha convertido en el estándar de facto del React moderno.

La versión 3 salió en junio de 2025 y trajo mejor TypeScript y una API de composición más limpia. Desde la 3.3, los gráficos son responsive sin envolverlos en <ResponsiveContainer>. Así se instala y así queda un gráfico de líneas básico:

npm install recharts react-is

import { LineChart, Line, XAxis, YAxis, Tooltip } from 'recharts';
 
const datos = [
  { mes: 'Ene', visitas: 1200 },
  { mes: 'Feb', visitas: 1900 },
  { mes: 'Mar', visitas: 1500 },
];
 
export default function GraficoVisitas() {
  return (
    <LineChart responsive style={{ width: '100%', height: 300 }} data={datos}>
      <XAxis dataKey="mes" />
      <YAxis />
      <Tooltip />
      <Line type="monotone" dataKey="visitas" stroke="#2563eb" />
    </LineChart>
  );
}

El paquete react-is tiene que coincidir con tu versión de React. Si trabajas con una versión anterior a la 3.3, envuelve el gráfico en <ResponsiveContainer> con una altura numérica.

Pros de Recharts

• API declarativa: cada eje, línea o tooltip es un componente React.
• TypeScript de primera clase desde la versión 3.
• Responsive integrado desde la 3.3, sin contenedor extra.
• Se integra con el estado y el ciclo de vida de React sin trucos.
• Es la base de los gráficos de shadcn/ui y Tremor.

Contras de Recharts

• Solo funciona con React: fuera de ese ecosistema no te sirve.
• Es la más pesada de las tres: unos 152 KB comprimida.
• Las personalizaciones muy avanzadas te obligan a bajar a D3.
• Al dibujar en SVG, con decenas de miles de puntos el rendimiento se resiente. Para datos masivos, mejor una librería en canvas.

Precio: gratis, MIT. Web: recharts.org

Caso de uso ideal: dashboard en Next.js o Vite + React, panel de analíticas de una SaaS, o gráficos estándar (líneas, barras, áreas, tarta) dentro de una interfaz React.

¿Cuál elegir según tu proyecto?

• Sin framework, o con Vue, Svelte o Angular → Chart.js. Sin dependencias y suficiente para la mayoría de gráficos estándar.
• React o Next.js → Recharts. Integración nativa y código limpio. Si ya usas shadcn/ui, la tienes prácticamente incluida.
• Visualización a medida → D3.js. Mapas de calor, grafos de red, timelines interactivos o mapas coropléticos.

Una regla práctica: si puedes nombrar tu gráfico con una palabra de catálogo (barras, líneas, tarta, área), usa Chart.js o Recharts. Si no puedes, probablemente necesitas D3.

Chart.js vs Recharts

La diferencia real no es la calidad, es el entorno. Chart.js es configuración sobre un canvas y funciona en cualquier web. Recharts son componentes React que dibujan SVG. En un proyecto React, Recharts encaja mejor aunque pese más del doble. Fuera de React, Chart.js gana por goleada.

Recharts vs D3

Recharts resuelve en 15 líneas lo que en D3 te lleva 60, pero solo dentro de su catálogo de gráficos. D3 no tiene catálogo: tiene piezas. Empieza con Recharts y baja a D3 solo para el gráfico que Recharts no sepa hacer.

Mi elección personal

En webs de diseñadores, portfolios, herramientas internas y proyectos de clientes, elijo Chart.js si no hay React y Recharts si lo hay. Son predecibles, están bien documentadas y no dan sorpresas en producción.

D3 lo reservo para cuando el cliente pide algo que no he visto en ningún template: un mapa interactivo o un grafo de relaciones. La curva es real, pero cuando entiendes las escalas y las selecciones, el resto fluye.

Lo que no te recomiendo en ningún caso es mezclar D3 puro con React sin un patrón claro. Las dos quieren controlar el DOM, y eso acaba en bugs difíciles de rastrear.

¿Buscas ideas para distribuir los gráficos antes de programar? Echa un vistazo a esta inspiración de dashboards y paneles de administración.

Preguntas frecuentes

¿Qué es Recharts?

Es una librería de gráficos para React, gratuita y con licencia MIT. Construyes cada gráfico combinando componentes (ejes, líneas, tooltips) y ella lo dibuja en SVG. Es la más usada del ecosistema React.

¿Recharts usa D3 por debajo? ¿Entonces son lo mismo?

No son lo mismo. Recharts usa módulos matemáticos de D3 (escalas, interpolaciones), pero su API es de componentes React. Con D3 puro manipulas el DOM tú. Con Recharts declaras JSX y la librería renderiza. El nivel de abstracción es muy distinto, y se nota en el tiempo de desarrollo.

¿Chart.js o D3 para un diseñador sin mucha experiencia en JavaScript?

Chart.js, sin duda. Siguiendo la documentación oficial tienes un gráfico funcionando en menos de media hora. D3 te pide entender selecciones, escalas y joins antes de ver nada útil en pantalla.

¿Qué librería usa shadcn/ui para sus gráficos?

Recharts. Los componentes de gráficos de shadcn/ui son envoltorios con estilos sobre Recharts, así que si ya usas shadcn/ui, aprender Recharts te sirve directamente.

¿Son gratuitas para proyectos comerciales?

Sí. Chart.js y Recharts usan MIT y D3 usa ISC, que en la práctica equivale a MIT. Puedes usarlas en proyectos comerciales sin pagar ni pedir permiso.

¿Qué pasa con ECharts y ApexCharts?

Merecen considerarse. ECharts (unos 6 millones de descargas semanales) brilla con datasets muy grandes y con gráficos exóticos como treemaps, sunbursts o mapas. Pesa más, pero rinde mejor con datos masivos. ApexCharts es una alternativa a Chart.js con más tipos incluidos y mejor aspecto por defecto. Las repaso en las mejores librerías de gráficos en JavaScript.

¿Puedo usar Chart.js en un proyecto React?

Sí, con react-chartjs-2, un wrapper mantenido por la comunidad que envuelve Chart.js en componentes React. Es válido si ya conoces Chart.js. La pega es que resulta menos idiomático que Recharts.

Más recursos de desarrollo web

• Las mejores librerías de gráficos en JavaScript: ApexCharts, ECharts y Mermaid para diagramas.
• React.js desde cero, si vas a usar Recharts y aún no dominas React.
• Node.js y npm para principiantes, para instalar cualquiera de estas librerías.
• Sliders y carruseles sin jQuery: alternativas modernas a los plugins de siempre.
• Desarrollo web: todos los recursos del blog.