Necesitas añadir un gráfico a tu proyecto. Buscas en npm, ves tres nombres que se repiten en cada tutorial: Chart.js, D3.js y Recharts. Cada uno tiene millones de descargas semanales y miles de estrellas en GitHub. Y ningún artÃculo te dice cuál coger sin antes venderte los tres como «la mejor opción».
Te ahorro el rodeo: son herramientas distintas para necesidades distintas. Aquà te explico cuál encaja con qué proyecto, con datos reales de 2026 y sin ambigüedades.
Tabla comparativa rápida
| Criterio | Chart.js | D3.js | Recharts |
|---|---|---|---|
| Bundle gzip | ~213 KB | ~90 KB (modular) | ~136 KB |
| Descargas/semana npm | ~11,6 M | ~11,5 M | ~51 M |
| Dependencia de framework | Ninguna | Ninguna | Requiere React |
| Curva de aprendizaje | Baja | Alta | Media |
| Tipos de gráfico incluidos | ~8 tipos | Ilimitados (manual) | ~15 tipos |
| Renderizado | Canvas | SVG / Canvas / DOM | SVG |
| Licencia | MIT | ISC (MIT compatible) | MIT |
| Mejor para | Dashboards sencillos | Visualizaciones a medida | Apps React |
Chart.js — rápido y sin complicaciones
Chart.js es la librerÃa de gráficos más instalada en proyectos no-React: unos 11,6 millones de descargas semanales en npm, incluida por defecto en frameworks como Rails y Laravel. 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 lÃneas funcionando. Eso es su mayor ventaja y, a la vez, su lÃmite: cuando necesitas algo que no está entre sus ocho tipos de gráfico incluidos, empiezas a pelear con la API.
Pros de Chart.js
- API de configuración sencilla: un objeto JSON y ya tienes el gráfico
- Documentación clara con ejemplos para cada tipo
- Funciona en cualquier proyecto sin dependencias externas
- Plugins de la comunidad para ampliar tipos de gráfico
- Rendimiento sólido en datasets de tamaño medio
Contras de Chart.js
- Renderiza en
<canvas>: más difÃcil de inspeccionar y estilizar con CSS - Personalización avanzada requiere escribir plugins propios
- No es tree-shakeable de serie: importas todo aunque uses solo lÃneas
- Para visualizaciones complejas o a medida, te quedas corto rápido
Precio: gratis, MIT. Enlace: chartjs.org
Caso de uso ideal: panel de analÃticas en una web estática, dashboard interno en un proyecto Laravel o Rails, visualización rápida de datos que no necesita 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. Eso lo convierte en la herramienta más poderosa del ecosistema y también en la más exigente.
El New York Times, Financial Times, Bloomberg y Reuters construyen sus infografÃas interactivas con D3. No es casual: cuando necesitas una visualización que no existe en ningún catálogo, D3 es la única opción real. Con unos 11,5 millones de descargas semanales, su adopción masiva viene sobre todo de que está debajo de Recharts, Nivo y muchas otras librerÃas que lo usan internamente.
Pros de D3.js
- Flexibilidad absoluta: puedes crear cualquier visualización posible
- Arquitectura modular: importas solo los submódulos que necesitas (
d3-scale,d3-array…) - Soporte SVG nativo: inspección en DevTools, estilos CSS, accesibilidad
- Ecosistema enorme de ejemplos y Observable notebooks
- Curva de aprendizaje que paga dividendos en proyectos complejos
Contras de D3.js
- Un gráfico de barras sencillo requiere 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, joins de datos
- No es la opción si tu objetivo es «tener un gráfico funcionando esta tarde»
Precio: gratis, licencia ISC (compatible con MIT). Enlace: d3js.org
Caso de uso ideal: visualizaciones interactivas a medida, periodismo de datos, mapas de calor, grafos de red, cualquier gráfico que no exista en un catálogo estándar.
Truco para usar D3 con React sin conflictos: usa los módulos no-DOM de D3 (
d3-scale,d3-array) directamente en JSX, y para los módulos que tocan el DOM (d3-selection,d3-axis), asigna unrefy llama a D3 dentro de un hookuseEffect.
Recharts — para proyectos React
Recharts usa D3 por debajo pero expone una API declarativa de componentes React. El resultado es que puedes tener un <LineChart> con tooltips, leyenda y responsive en menos de 20 lÃneas de JSX. Sus números lo dicen todo: unos 51 millones de descargas semanales en npm, muy por encima de Chart.js y D3 combinados, porque está incluido en infinidad de proyectos React como dependencia transitiva.
La versión 3 (lanzada en 2024) mejoró el soporte TypeScript y la API de composición. Es la opción que usa shadcn/ui como base para sus componentes de gráficos, lo que consolida su posición como estándar de facto en el ecosistema React moderno.
Pros de Recharts
- API declarativa:
<BarChart>,<LineChart>,<PieChart>son componentes React nativos - TypeScript de primera clase desde Recharts v3
- Responsive nativo con
<ResponsiveContainer> - Integración perfecta con el ciclo de vida y el estado de React
- Usado como base en shadcn/ui y Tremor
Contras de Recharts
- Solo funciona con React: inútil fuera de ese ecosistema
- Personalizaciones muy avanzadas siguen requiriendo bajar a D3 puro
<ResponsiveContainer>necesita altura numérica explÃcita —height="100%"falla si el padre no tiene altura definida- Para datasets de más de 50.000 puntos, empieza a mostrar limitaciones de rendimiento
Precio: gratis, MIT. Enlace: recharts.org
Caso de uso ideal: dashboard en Next.js o Create React App, panel de analÃticas en una SaaS, visualizaciones estándar (lÃneas, barras, áreas, pie) integradas en una interfaz React.
Tip: Si buscas plantillas de dashboard React con Recharts o Chart.js ya integrados, Envato Elements tiene packs de componentes UI listos para personalizar.
¿Cuál elegir según tu proyecto?
Tres escenarios concretos para que no tengas que pensarlo demasiado:
- Proyecto sin framework o con Vue/Svelte/Angular → Chart.js. Sin dependencias, funciona en cualquier entorno, suficiente para el 80% de los casos estándar.
- Proyecto React o Next.js → Recharts. La integración es nativa, el código queda limpio y la documentación es excelente. Si ya usas shadcn/ui, Recharts está prácticamente incluido.
- Visualización a medida que no existe en ningún catálogo → D3.js. Mapas de calor, grafos de red, timelines interactivos, choropleth maps. Si necesitas control total sobre cada pÃxel, D3 es la única opción real.
Una regla práctica: si puedes describir tu gráfico con un nombre estándar (barras, lÃneas, pie, área), usa Chart.js o Recharts. Si no puedes describir exactamente lo que necesitas con un nombre de catálogo, probablemente necesites D3.
Mi elección personal
Para el 90% de los proyectos que llegan al blog — webs de diseñadores, portfolios, herramientas internas, proyectos de clientes — mi recomendación es Chart.js si no usas React y Recharts si sà lo usas. Son predecibles, están bien documentadas y no te van a dar sorpresas en producción.
D3 lo reservo para cuando el cliente necesita algo que no he visto en ningún template: un mapa interactivo, un grafo de relaciones, una visualización que tengo que construir desde cero. La curva de aprendizaje es real, pero una vez que entiendes cómo funcionan las escalas y las selecciones, el resto fluye.
Lo que no te recomiendo en ningún caso: mezclar D3 puro con React sin un patrón claro de integración. La manipulación directa del DOM de D3 y el virtual DOM de React se llevan mal si no tienes cuidado.
Tip: En Creative Market puedes encontrar kits de UI con dashboards y gráficos maquetados, útiles como punto de partida antes de integrar la librerÃa que elijas.
Preguntas frecuentes
¿Recharts usa D3 por debajo? ¿Entonces son lo mismo?
No son lo mismo. Recharts usa los módulos matemáticos de D3 (escalas, interpolaciones) pero expone una API de componentes React completamente diferente. Con D3 puro manipulas el DOM directamente. Con Recharts declaras componentes JSX y la librerÃa se encarga del renderizado. El nivel de abstracción es muy distinto, y eso se nota en el tiempo de desarrollo.
¿Chart.js o D3 para un diseñador sin mucha experiencia en JavaScript?
Chart.js sin duda. Puedes tener un gráfico de lÃneas o barras funcionando siguiendo la documentación oficial en menos de 30 minutos. D3 requiere entender conceptos como selecciones, escalas de datos y joins antes de ver algo útil en pantalla. Para empezar, Chart.js es la opción correcta.
¿Son gratuitas para proyectos comerciales?
Las tres tienen licencia de código abierto permisiva: Chart.js y Recharts usan MIT, D3 usa ISC (equivalente a MIT en la práctica). Puedes usarlas en proyectos comerciales sin pagar royalties ni notificar a nadie.
¿Qué pasa con ECharts y ApexCharts? ¿Merecen considerarse?
SÃ, especialmente ECharts si necesitas datasets muy grandes (más de 50.000 puntos) o tipos de gráfico exóticos como treemaps, sunbursts o mapas geográficos. Su bundle es más pesado (~300 KB sin tree-shaking) pero el rendimiento en datos masivos es superior. ApexCharts es una buena alternativa a Chart.js con más tipos de gráfico incluidos y mejor aspecto visual por defecto, sin dependencias de framework.
¿Puedo usar Chart.js en un proyecto React?
SÃ. Existe react-chartjs-2, un wrapper oficial que envuelve Chart.js en componentes React. Es una opción válida si ya conoces Chart.js y no quieres aprender la API de Recharts. La desventaja es que no es tan idiomático como Recharts: pierdes parte de la integración natural con el ciclo de vida de React.
Más recursos de desarrollo web
- Sliders y carruseles sin jQuery — alternativas modernas a las librerÃas jQuery de toda la vida
- Desarrollo web — Todos los recursos de desarrollo web del blog
Si te ha ayudado a decidir, compártelo con quien esté dando vueltas a la misma pregunta.
