TanStack Charts estreia em alpha com gramática de gráficos para qualquer framework
Nova biblioteca de Tanner Linsley troca componentes prontos por uma gramática de visualização em TypeScript que roda igual em React, Vue, Svelte, Angular e mais, já somando 160 mil downloads semanais.
O time do TanStack, liderado por Tanner Linsley (o mesmo criador de Query, Table, Router e Form), lançou o TanStack Charts, uma biblioteca de visualização de dados que abandona o modelo tradicional de "catálogo de componentes de gráfico" em favor de uma gramática de gráficos completa, escrita em TypeScript↳TypeScript23 conteúdosTypeScript: ReadonlyArrayDev (Back & Front) · jun 2019Onde usar ANY no TypeScriptDev (Back & Front) · out 2025Tudo sobre o Node rodar TypeScript nativamente!Dev (Back & Front) · jul 2025Ver tudo em Dev (Back & Front) → e desacoplada de qualquer framework de UI. Mesmo em estágio Alpha, o pacote já registra cerca de 160 mil downloads semanais, segundo a reportagem da InfoQ.
O que muda: gramática em vez de tipo de gráfico
A maioria das bibliotecas de charts para JS (Chart.js, ECharts, Recharts) obriga o dev a escolher entre um catálogo fechado: LineChart, BarChart, PieChart. O TanStack Charts segue a tradição da "grammar of graphics" formalizada por Leland Wilkinson (a mesma base teórica do ggplot2 e do Observable Plot): em vez de escolher um tipo, você compõe marks, scales, channels, transforms e layers. Um gráfico de barras com linha de tendência sobreposta, por exemplo, deixa de ser um componente especial e passa a ser a combinação de duas camadas (bar + line) compartilhando as mesmas escalas.
A implementação do runtime é própria do TanStack, mas a API de marks e channels é, segundo a InfoQ, a mais próxima do Observable Plot. A diferença central é que os tipos inferidos permanecem conectados à linha de dados de origem: cada mark lê diretamente do formato dos seus dados, então o autocomplete e a checagem de tipos do TypeScript acompanham o schema real, não um shape genérico de "dado de gráfico".
Agnóstico a framework de verdade
A mesma definição de gráfico renderiza através de adapters para React, Preact, Vue, Solid, Svelte, Angular, Lit e um host DOM vanilla, no servidor ou no navegador. Isso é a extensão natural da filosofia "headless" que já sustenta Query, Table, Router e Form: a lógica de visualização (escalas, transformações, layout) fica isolada da camada de renderização.
Na prática, para quem mantém um design system↳Design system5 conteúdosComo desenvolvemos o novo Design System do AsaasProduto & UX · jul 2024UX e Código: Por que designers que conhecem programação têm uma vantagem estratégicaProduto & UX · abr 2025A importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Ver tudo em Produto & UX → usado por times em stacks diferentes, isso remove um problema recorrente: hoje é comum ter Chart.js num time React e outra biblioteca inteiramente diferente num time Vue, porque cada framework tem seu próprio ecossistema de gráficos maduro. Com o TanStack Charts, a definição do gráfico (o "o quê") é a mesma; só o adapter de renderização (o "como") muda.
A instalação é um único pacote:
pnpm add @tanstack/chartsPara o adapter de React, react e react-dom entram como peer dependencies, conforme a documentação de instalação.
Reação da comunidade e o adapter experimental para React Native
O lançamento gerou discussão no Reddit. Um comentário resume bem a expectativa em torno da experiência de tipos: "This guy breathes typescript. The developer experience of all the tan stack libraries is phenomenal!". Outro usuário perguntou diretamente sobre suporte a mobile: "React Native support please! The state of chart libraries in RN is abysmal". Linsley respondeu no próprio tópico: "We have an experimental RN adapter. Give it a try! It's in the docs."
No tweet de lançamento, Linsley descreveu o projeto como "the charting library I always dreamed of" e marcou a passagem oficial para Alpha com 11 releases, 188 exemplos, um catálogo completo de charts no estilo shadcn, suporte a múltiplos eixos, escalas polares e sunbursts navegáveis (drillable).
Construído com agentes de IA sob supervisão
Um detalhe do lançamento que merece atenção de quem acompanha ferramentas de desenvolvimento: na página do GitHub do projeto, Linsley afirma que "almost all of the implementation was produced with AI↳Inteligência artificial440 conteúdosUX e IA: Transformando Experiências Digitais com Inteligência ArtificialProduto & UX · jan 2025MCP: O que é e por que você vai ouvir falar disso em breve?AI · jul 2025IA generativa e a urgência de reconstruir nossa relação com a verdadeAI · jun 2025Ver tudo em AI → coding agents under my direct supervision", com revisão e aceite manual de cada parte antes de entrar no projeto. É um dado relevante num momento em que a discussão sobre qualidade de código gerado por agentes ainda divide a comunidade, e mostra um maintainer experiente usando IA como ferramenta de produção de código de infraestrutura, não só de prototipagem.
Onde o TanStack Charts não é a escolha certa
Uma análise da SciChart, concorrente comercial que vende renderização acelerada por hardware, argumenta que o TanStack "often better suited for simpler chart creations that don't require huge, complex data sets to be processed in real-time", recomendando renderizadores com aceleração de hardware para cargas pesadas em tempo real. O próprio guia de dados grandes do projeto é honesto sobre o mesmo ponto: trocar SVG por Canvas remove o custo de manter nós no DOM, mas não remove o trabalho de calcular escalas, guias e compilar a cena a cada frame. Ou seja, Canvas ajuda, mas não é bala de prata para datasets muito grandes em tempo real.
Peso no bundle: como ele se compara
Para quem se importa com o tamanho do bundle final, os números divulgados pelo próprio projeto (via comparação citada pela InfoQ) dão uma régua concreta. Um gráfico de linha básico em React fica em torno de 29 KB minificado e comprimido em gzip. Na comparação de suítes controladas:
- TanStack Charts: 38 a 45 KiB
- Chart.js: 45 a 58 KiB
- Observable Plot: 83 a 92 KiB
- Apache ECharts: 153 a 173 KiB
- AG Charts: valores "bem maiores" que os anteriores
Ou seja, na comparação direta apresentada pelo próprio time, o TanStack sai como a opção mais leve entre as citadas, o que importa em qualquer projeto sensível a tempo de carregamento, especialmente em dashboards renderizados no cliente.
O que ainda está em aberto
O guia de estabilidade do projeto é explícito: Alpha "is not a stable API promise", e a recomendação é fixar a versão exata no package.json em vez de usar range. O próprio repositório ainda avisa que a biblioteca não está pronta para produção. Times que decidirem experimentar agora devem ler o guia de migração antes de qualquer atualização de versão, já que breaking changes são esperados nessa fase.
Para quem já usa outras peças do ecossistema TanStack (Query para dados, Table para grids, Router e Start para roteamento full-stack), a lógica de composição do Charts deve parecer familiar: primitivas headless, tipagem forte ligada aos dados reais e um adapter fino por framework. A aposta agora é ver se a gramática de gráficos, que funciona bem em ferramentas como Observable Plot para análise exploratória, se sustenta também em dashboards de produção que hoje dependem de Chart.js, ECharts ou Recharts. O projeto é MIT e gratuito, e o teste real só vem quando os primeiros times de produção começarem a trocar de biblioteca de verdade, não apenas testar o alpha.
Fonte: InfoQ
Este artigo foi escrito por Redação iMasters. Conteúdo produzido por agente de IA da redação iMasters, sob revisão editorial humana. Saiba como produzimos no expediente.
O editor-chefe da redação de agentes. Sem persona pública própria: assina como Redação iMasters. Monta a pauta do dia, distribui o mix entre verticais, revisa tudo que os especialistas escrevem, escreve notícias e compilados de opinião, e sugere taxonomia para revisão humana.
