Hacer gráficas en una app web suele empezar fácil y complicarse rápido: la librería que elegiste no deja combinar dos tipos de gráfica o se vuelve pesada. TanStack Charts quiere resolver eso, y el 5 de octubre de 2026 llegó a su versión 1.0.
¿Qué es?
Es una librería de visualización para TypeScript y JavaScript creada por Tanner Linsley, fundador del ecosistema TanStack. Usa licencia MIT, así que puedes usarla gratis en proyectos personales y comerciales.
Su idea central es la llamada gramática de gráficos. En vez de escoger “gráfica de barras” o “gráfica de líneas”, armas la tuya juntando piezas: marcas (líneas, puntos, barras), escalas, ejes, transformaciones y capas. Así puedes mezclar una línea con puntos y barras en la misma gráfica sin pelearte con la librería.
Por defecto dibuja en SVG, un formato de imagen vectorial que se ve nítido a cualquier tamaño y que es accesible para lectores de pantalla. Si tienes muchísimos datos, puedes activar Canvas, que pinta más rápido. También puede generar las gráficas en el servidor.
No está atada a un solo framework. Trae adaptadores para React, Preact, Vue, Solid, Svelte, Angular y Lit, además de una versión para el navegador sin framework. El soporte para React Native todavía es experimental.
El proyecto está muy activo: tiene más de 800 estrellas en GitHub, recibió cambios esta misma semana y ya publicó la versión 1.1.0 en npm. Con la 1.0, el equipo se comprometió a no quitar ni renombrar funciones sin sacar una versión mayor.
¿Para qué te sirve?
Paneles de administración en Next.js. Si tu app muestra ventas, visitas o uso del servidor, puedes generar la gráfica en el servidor y que llegue lista al navegador.
Reportes que crecen. Empiezas con una línea sencilla y, cuando el cliente pide comparar con el año pasado o marcar picos, agregas capas en lugar de cambiar de librería.
Gráficas con muchos puntos. Para monitoreo o datos de sensores, el modo Canvas ayuda a que la página no se vuelva lenta.
Cómo empezar
Se instala un solo paquete desde npm. Después importas el adaptador de React desde la ruta @tanstack/charts/react y armas tu primera gráfica con una marca de línea y tus datos. La documentación oficial en tanstack.com/charts trae ejemplos para cada framework.
npm install @tanstack/chartsLo que debes saber
Es una librería joven: el repositorio tiene poco más de dos meses. Según InfoQ, en septiembre todavía estaba en fase alfa y su autor pedía no usarla en producción; la 1.0 ya promete estabilidad, pero conviene probarla primero en un proyecto pequeño.
InfoQ también cuenta que Linsley reconoció que casi toda la implementación se hizo con agentes de IA bajo su supervisión. No es malo por sí mismo, pero es un dato útil si tu equipo tiene políticas sobre código generado.
Si necesitas algo probado por años, Chart.js sigue siendo una alternativa conocida. La propuesta de TanStack es distinta: más control y tipos de TypeScript de punta a punta a cambio de aprender su forma de componer gráficas.
Sigue leyendo
- TanStack Hotkeys: atajos de teclado ordenados para tus apps de React
- Vinext 1.0: tu app de Next.js corriendo sobre Vite