TanStack Charts 1.0 chega com sistema de gráficos composável

TanStack Charts 1.0: gráficos que você não precisa abandonar

Tanner Linsley anunciou o lançamento do TanStack Charts 1.0, uma biblioteca de gráficos baseada em composição de "marks". A tese central do post é "charts you don't have to outgrow": o desafio real de uma biblioteca de gráficos não é colocar uma linha na tela, mas continuar atendendo à medida que o produto cresce e as exigências de visualização se acumulam - barras sob a linha, anotações, pontos destacados, tooltips específicos da aplicação. É nesse ponto, segundo Linsley, que se revelam as limitações das escolhas já feitas por outras bibliotecas.

Histórico do autor

Linsley relata uma trajetória longa na área: trabalhou com dados de marketing e SEO na Nozzle, sua startup anterior, usou bastante D3, ajudou a manter e construir o Chart.js 2.0 ao lado de Everett Timberg e depois criou o react-charts para que os gráficos se integrassem naturalmente ao React. O react-charts funcionou por muito tempo, mas começou a ficar limitado quando ele quis combinar elementos de formas não previstas pelo design original.

Estudando a Grammar of Graphics e usando o Observable Plot como referência, ele passou a enxergar a API que desejava: visualizações montadas a partir de peças menores. Ainda assim, acumulava wrappers sobre bibliotecas para ajustar comportamentos. Ao iniciar o TanStack Charts, tinha cerca de dez anos de ideias acumuladas. Um fator decisivo foi a IA: em vez de implementar cada peça à mão ao longo de anos, ele desenhou a API e a experiência como queria, e a IA cuidou da implementação - com polimento manual ainda necessário, sobretudo no sistema de tipos, já que o autor se descreve como fanático por type-safety.

Arquitetura baseada em marks

A biblioteca é construída em torno de marks: linhas, pontos e barras são marks; scales mapeiam os dados para os valores que as marks precisam; e tudo se compõe com eixos e interações. Linsley reconhece que isso não é novidade para quem conhece Observable Plot ou a Grammar of Graphics - ele diz estar emprestando ideias de pessoas mais experientes.

A consequência prática: para adicionar pontos sobre uma linha, adiciona-se pontos; para incluir barras no mesmo gráfico, adiciona-se barras, sem buscar um novo tipo de gráfico que combine exatamente o que se precisa. Para casos incomuns, é possível criar marks e scales customizadas, interações e renderers próprios, mergulhando nos "scene contracts". Linsley destaca que essa composição muda o fluxo de trabalho: dá para experimentar com dados reais e ajustar sem precisar acertar todas as escolhas de antemão.

Os tipos devem acompanhar todo o processo - da escolha de valores nos dados, passando pelas scales, até marks e interações. Se a informação de tipos se perde no meio do caminho, a API fica menos agradável e menos produtiva para uso com IA.

Renderização, animação e tamanho de bundle

A renderização é uma escolha modular: o padrão é SVG - o autor considera trabalhar com a Canvas API doloroso desde os tempos do Chart.js - mas Canvas está disponível como import e renderer separado para quando for necessário. Animação não vem embutida, mas se integra sem atrito quando exigida. Há ainda compact scales e suporte a scales do D3, permitindo trazer a própria implementação e incluir apenas as peças necessárias. Linsley também nota que a IA ajuda a manter tudo leve, usando só o essencial.

O tamanho é tratado como prioridade: o projeto mantém orçamentos de bundle, testes e testes de navegador para cada mudança, evitando que novos recursos virem custo silencioso para todos - o mesmo problema que ele criticou em bibliotecas do passado.

O que significa 1.0

Para Linsley, 1.0 significa estar pronto para dar suporte a quem construir sobre a API: atualizar a biblioteca sem risco de reescrever o gráfico, quebrar o build ou atrapalhar o uso com IA - inclusive para marks e renderers customizados. Ele reconhece que ainda há mais a fazer, e que mudanças futuras de API exigirão caminhos de migração, mas se mostra confiante de que os contratos atuais permitirão isso de forma limpa.

Ele encerra incentivando leitores a pegar um gráfico real de suas aplicações, pedir a uma IA para reescrevê-lo com TanStack Charts, criar gráficos incomuns e relatar onde a experiência ficar incômoda.