Para pintar datos en una web ya no hace falta jQuery. Hoy tienes librerÃas de gráficos en JavaScript potentes y ligeras que montan barras, lÃneas, tartas o diagramas con muy poco código. Te cuento las mejores y cuándo usar cada una.
LibrerÃas para gráficos
Chart.js
La más popular para empezar: gratis, ligera y con 8 tipos de gráfico listos. Dibuja sobre <canvas> y con pocas lÃneas tienes un gráfico responsive. Es mi recomendación por defecto para la mayorÃa de proyectos. chartjs.org
ApexCharts
Gráficos en SVG, muy vistosos y con interactividad (zoom, tooltips) de serie. Perfecta para dashboards. Gratis y con integraciones para React, Vue y Angular. apexcharts.com
D3.js
La más potente y flexible, para visualizaciones a medida y fuera de lo común. A cambio, tiene una curva de aprendizaje alta: aquà tú controlas cada elemento del SVG. Para cuando Chart.js se te queda corto. d3js.org
Apache ECharts
Muy completa, aguanta grandes volúmenes de datos y trae mapas, gráficos 3D y tableros complejos. Buena opción para aplicaciones con mucha analÃtica. echarts.apache.org
Para diagramas y flujos
Si lo que quieres son diagramas de flujo, organigramas o esquemas, la referencia es Mermaid: describes el diagrama con texto sencillo y él lo dibuja. Se usa hasta en la documentación de GitHub. mermaid.js.org
Cuál elegir
- Un gráfico rápido y sencillo → Chart.js.
- Un dashboard bonito e interactivo → ApexCharts.
- Una visualización única a medida → D3.js.
- Muchos datos o mapas → ECharts.
- Diagramas de flujo → Mermaid.
¿Y jQuery?
Hace años se usaban plugins de jQuery para esto. Hoy no hace falta: estas librerÃas funcionan con JavaScript puro (o con tu framework) y rinden mejor. Si mantienes un proyecto antiguo con jQuery, todas ellas conviven sin problema.
Más desarrollo web en el blog
- Patrones de diseño en JavaScript.
- Microinteracciones web con código.
- Todos los artÃculos de desarrollo web.
Preguntas frecuentes
¿Cuál es la mejor librerÃa de gráficos en JavaScript?
Para la mayorÃa, Chart.js: gratis, fácil y suficiente. Si necesitas dashboards muy interactivos, ApexCharts; para algo totalmente a medida, D3.js.
¿Son gratis?
Chart.js, ApexCharts, D3.js, ECharts y Mermaid son de código abierto y gratuitas. Otras como Highcharts son gratis solo para uso no comercial.
¿Funcionan con React o Vue?
SÃ. Chart.js, ApexCharts y ECharts tienen envoltorios oficiales para React, Vue y Angular, asà que se integran sin lÃos.
Con esto tienes por dónde empezar a graficar tus datos. Si te ha servido, compártelo o dime en comentarios cuál usas tú.
