Repolode
Enviar
TanStack

TanStack/charts

Una gramática de gráficos tipada para TypeScript, adaptable, accesible y con renderizado en el servidor, basada en primitivas modulares de D3.

Ver en GitHubSitio web
Estrellas
848
Forks
56
Issues abiertos
51
Último commit
hace 13 horas

¿Qué es?

TanStack Charts es una biblioteca de visualización para TypeScript que define los gráficos como una composición de marcas, canales y escalas. Las marcas consumen directamente los arreglos, objetos o iterables de datos originales, por lo que las aplicaciones no necesitan modificar su modelo de datos para crear un gráfico. Incluye escalas compactas comunes, como las numéricas, de bandas, de puntos y ordinales; también se pueden sustituir por funciones nativas de d3-scale cuando se necesitan semánticas más completas.

La biblioteca también abarca el entorno de ejecución del gráfico: diseño adaptable, márgenes automáticos para guías, temas, interacción, animación, accesibilidad, renderizado SVG en el servidor, hidratación y exportación. Las definiciones son independientes del framework y se pueden renderizar con React, Preact, Vue, Solid, Svelte, Angular, Lit, Alpine, Octane, un entorno DOM vanilla, SVG estático o un renderizador Canvas opcional. Las marcas, transformaciones, diseños y renderizadores se exponen en subrutas separadas para que las aplicaciones solo importen lo que usan.

Funciones clave

  • 01Las marcas aceptan arreglos, objetos, tuplas e iterables sin necesidad de reformular el modelo de datos.
  • 02Escalas lineales, de bandas, de puntos y ordinales compactas, con sustitución directa por d3-scale.
  • 03Tamaño adaptable con márgenes automáticos para guías, temas e interacción.
  • 04Renderizado SVG en el servidor, hidratación y exportación.
  • 05Renderizador Canvas opcional para reducir el costo del DOM por marca.
  • 06La misma definición de gráfico funciona en distintos frameworks y en el DOM vanilla.

Casos de uso

  • Añadir gráficos de líneas, barras o áreas estándar a una aplicación React o Vue.
  • Renderizar gráficos en el servidor para páginas con SSR o exportaciones estáticas.
  • Crear visualizaciones específicas del producto que superen las opciones predefinidas habituales.
  • Compartir una definición de gráfico entre varios frameworks en una base de código que usa más de uno.

Inicio rápido

  1. 1

    Instala las dependencias del espacio de trabajo

    pnpm install
  2. 2

    Ejecuta el sandbox del panel de datos integrado

    pnpm dev:sandbox

Antes de usarlo

  • El README documenta la versión main, que aún no se ha publicado y puede diferir de la versión 1.1.0 publicada.
  • El desarrollo requiere Node.js 22 o posterior y pnpm 11.
  • La renderización con Canvas reduce la carga del DOM, pero no el uso de memoria de la escena ni el coste de buscar el punto más cercano entre datos densos en gráficos interactivos de gran tamaño.

En colecciones

Cursos y herramientas de ciencia de datos

Temas

#data-visualization#charts#d3#typescript#svg#accessibility#ssr#react#accessible-charts#charting-library

Preguntas frecuentes

¿Qué es charts?
Una gramática de gráficos tipada para TypeScript, adaptable, accesible y con renderizado en el servidor, basada en primitivas modulares de D3. TanStack Charts es una biblioteca de visualización para TypeScript que define los gráficos como una composición de marcas, canales y escalas. Las marcas consumen directamente los arreglos, objetos o iterables de datos originales, por lo que las aplicaciones no necesitan modificar su modelo de datos para crear un gráfico. Incluye escalas compactas comunes, como las numéricas, de bandas, de puntos y ordinales; también se pueden sustituir por funciones nativas de d3-scale cuando se necesitan semánticas más completas.
¿charts es gratuito? ¿Qué licencia tiene?
charts es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿charts sigue mantenido?
Mantenimiento activo. El último commit de charts fue el 22 oct 2026.
¿Para qué puedo usar charts?
Añadir gráficos de líneas, barras o áreas estándar a una aplicación React o Vue. Renderizar gráficos en el servidor para páginas con SSR o exportaciones estáticas. Crear visualizaciones específicas del producto que superen las opciones predefinidas habituales. Compartir una definición de gráfico entre varios frameworks en una base de código que usa más de uno.
¿Cómo se instala charts?
Instala las dependencias del espacio de trabajo: pnpm install Ejecuta el sandbox del panel de datos integrado: pnpm dev:sandbox
¿Dónde consigo charts?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/TanStack/charts

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados