Repolode
Enviar
TanStack

TanStack/charts

Uma gramática tipada de gráficos em TypeScript para criar visualizações responsivas, acessíveis e renderizadas no servidor com primitivas D3 modulares.

Ver no GitHubSite
Estrelas
848
Forks
56
Issues abertas
51
Último commit
há 13 horas

O que é?

TanStack Charts é uma biblioteca de visualização em TypeScript que descreve gráficos como uma composição de marcas, canais e escalas. As marcas usam diretamente os arrays, objetos ou iteráveis originais dos dados, sem exigir que as aplicações reformulem seu modelo de dados para criar um gráfico. A biblioteca oferece escalas numéricas, band, point e ordinal de forma compacta; quando é preciso de semânticas mais completas, é possível substituí-las por funções nativas de d3-scale.

A biblioteca também cuida do ambiente de execução do gráfico: layout responsivo, margens automáticas para guias, temas, interação, animação, acessibilidade, renderização de SVG no servidor, hidratação e exportação. As definições são independentes de framework e podem ser renderizadas com React, Preact, Vue, Solid, Svelte, Angular, Lit, Alpine, Octane, um host DOM vanilla, SVG estático ou um renderizador opcional de Canvas. Marcas, transformações, layouts e renderizadores são expostos em subpaths separados, para que as aplicações importem apenas o que usam.

Recursos principais

  • 01As marcas aceitam arrays, objetos, tuplas e iteráveis sem exigir uma reformulação do modelo de dados.
  • 02Escalas linear, band, point e ordinal compactas, com substituição direta por d3-scale.
  • 03Dimensionamento responsivo com margens automáticas para guias, temas e interação.
  • 04Renderização de SVG no servidor, hidratação e exportação.
  • 05Renderizador opcional de Canvas para reduzir o custo de DOM por marca.
  • 06A mesma definição de gráfico funciona em vários frameworks e no DOM vanilla.

Casos de uso

  • Adicionar gráficos de linha, barra ou área convencionais a uma aplicação React ou Vue.
  • Renderizar gráficos no servidor para páginas com SSR ou exportações estáticas.
  • Criar visualizações específicas de um produto que vão além dos presets comuns de gráficos.
  • Compartilhar uma única definição de gráfico entre vários frameworks em uma base de código multi-framework.

Início rápido

  1. 1

    Instale as dependências do workspace

    pnpm install
  2. 2

    Execute o sandbox do painel de dados integrado

    pnpm dev:sandbox

Antes de usar

  • O README documenta a versão main, ainda não lançada, que pode ser diferente da versão 1.1.0 publicada.
  • O desenvolvimento requer Node.js 22 ou superior e pnpm 11.
  • A renderização com Canvas reduz a carga do DOM, mas não o uso de memória da cena nem o custo de buscar o ponto mais próximo em dados densos em gráficos interativos de grande porte.

Em coleções

Cursos e ferramentas de ciência de dados

Tópicos

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

Perguntas frequentes

O que é charts?
Uma gramática tipada de gráficos em TypeScript para criar visualizações responsivas, acessíveis e renderizadas no servidor com primitivas D3 modulares. TanStack Charts é uma biblioteca de visualização em TypeScript que descreve gráficos como uma composição de marcas, canais e escalas. As marcas usam diretamente os arrays, objetos ou iteráveis originais dos dados, sem exigir que as aplicações reformulem seu modelo de dados para criar um gráfico. A biblioteca oferece escalas numéricas, band, point e ordinal de forma compacta; quando é preciso de semânticas mais completas, é possível substituí-las por funções nativas de d3-scale.
charts é gratuito? Qual é a licença?
charts é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
charts ainda é mantido?
Manutenção ativa. O último commit de charts foi em 22 de out. de 2026.
Para que posso usar charts?
Adicionar gráficos de linha, barra ou área convencionais a uma aplicação React ou Vue. Renderizar gráficos no servidor para páginas com SSR ou exportações estáticas. Criar visualizações específicas de um produto que vão além dos presets comuns de gráficos. Compartilhar uma única definição de gráfico entre vários frameworks em uma base de código multi-framework.
Como instalar charts?
Instale as dependências do workspace: pnpm install Execute o sandbox do painel de dados integrado: pnpm dev:sandbox
Onde consigo charts?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/TanStack/charts

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados