NEWS

TanStack Charts debuts in alpha with a grammar of graphics for any framework

New library from Tanner Linsley swaps out ready-made components for a TypeScript visualization grammar that runs the same way across React, Vue, Svelte, Angular, and more, already logging 160,000 weekly downloads.

TanStack Charts debuts in alpha with a grammar of graphics for any framework
Image: Redação iMasters

The TanStack team, led by Tanner Linsley (the same creator of Query, Table, Router, and Form), has released TanStack Charts, a data visualization library that abandons the traditional "chart component catalog" model in favor of a complete grammar of graphics, written in TypeScript and decoupled from any UI framework. Even at the Alpha stage, the package already logs about 160,000 weekly downloads, according to InfoQ's report.

What changes: grammar instead of chart type

Most JS charting libraries (Chart.js, ECharts, Recharts) force devs to pick from a closed catalog: LineChart, BarChart, PieChart. TanStack Charts follows the "grammar of graphics" tradition formalized by Leland Wilkinson (the same theoretical basis behind ggplot2 and Observable Plot): instead of picking a type, you compose marks, scales, channels, transforms, and layers. A bar chart with an overlaid trend line, for example, stops being a special component and becomes the combination of two layers (bar + line) sharing the same scales.

The runtime implementation is TanStack's own, but the marks and channels API is, according to InfoQ, the closest to Observable Plot. The key difference is that the inferred types remain connected to the source data line: each mark reads directly from your data's format, so TypeScript's autocomplete and type checking follow the actual schema, not a generic "chart data" shape.

Truly framework-agnostic

The same chart definition renders through adapters for React, Preact, Vue, Solid, Svelte, Angular, Lit, and a vanilla DOM host, on the server or in the browser. This is the natural extension of the "headless" philosophy that already underpins Query, Table, Router, and Form: the visualization logic (scales, transforms, layout) stays isolated from the rendering layer.

In practice, for anyone maintaining a design system used by teams across different stacks, this removes a recurring problem: today it's common to have Chart.js on a React team and an entirely different library on a Vue team, because each framework has its own mature charting ecosystem. With TanStack Charts, the chart definition (the "what") stays the same; only the rendering adapter (the "how") changes.

Installation is a single package:

pnpm add @tanstack/charts

For the React adapter, react and react-dom come in as peer dependencies, according to the installation documentation.

Community reaction and the experimental React Native adapter

The launch sparked discussion on Reddit. One comment sums up the expectation around the typing experience well: "This guy breathes typescript. The developer experience of all the tan stack libraries is phenomenal!". Another user asked directly about mobile support: "React Native support please! The state of chart libraries in RN is abysmal". Linsley replied in the thread itself: "We have an experimental RN adapter. Give it a try! It's in the docs."

In the launch tweet, Linsley described the project as "the charting library I always dreamed of" and marked the official move to Alpha with 11 releases, 188 examples, a full shadcn-style chart catalog, support for multiple axes, polar scales, and drillable sunbursts.

Built with AI agents under supervision

One detail of the launch that deserves attention from anyone following developer tooling: on the project's GitHub page, Linsley states that "almost all of the implementation was produced with AI coding agents under my direct supervision", with manual review and acceptance of every part before it entered the project. This is a relevant data point at a time when the discussion about the quality of agent-generated code still divides the community, and it shows an experienced maintainer using AI as a tool for producing infrastructure code, not just prototyping.

Where TanStack Charts isn't the right choice

An analysis by SciChart, a commercial competitor that sells hardware-accelerated rendering, argues that TanStack is "often better suited for simpler chart creations that don't require huge, complex data sets to be processed in real-time", recommending hardware-accelerated renderers for heavy real-time loads. The project's own large-data guide is honest about the same point: swapping SVG for Canvas removes the cost of maintaining nodes in the DOM, but doesn't remove the work of computing scales, guides, and compiling the scene every frame. In other words, Canvas helps, but it's no silver bullet for very large real-time datasets.

Bundle weight: how it compares

For anyone who cares about final bundle size, the numbers published by the project itself (via a comparison cited by InfoQ) offer a concrete yardstick. A basic line chart in React comes in at around 29 KB minified and gzip-compressed. In the controlled-suite comparison:

  • TanStack Charts: 38 to 45 KiB
  • Chart.js: 45 to 58 KiB
  • Observable Plot: 83 to 92 KiB
  • Apache ECharts: 153 to 173 KiB
  • AG Charts: values "much higher" than the previous ones

In other words, in the direct comparison presented by the team itself, TanStack comes out as the lightest option among those cited, which matters for any project sensitive to load time, especially dashboards rendered on the client.

What's still open

The project's stability guide is explicit: Alpha "is not a stable API promise", and the recommendation is to pin the exact version in package.json instead of using a range. The repository itself still warns that the library isn't ready for production. Teams that decide to experiment now should read the migration guide before any version update, since breaking changes are expected at this stage.

For anyone already using other pieces of the TanStack ecosystem (Query for data, Table for grids, Router and Start for full-stack routing), Charts' composition logic should feel familiar: headless primitives, strong typing tied to real data, and a thin adapter per framework. The bet now is whether the grammar of graphics, which works well in tools like Observable Plot for exploratory analysis, also holds up in production dashboards that today depend on Chart.js, ECharts, or Recharts. The project is MIT-licensed and free, and the real test only comes when the first production teams actually start switching libraries, not just trying out the alpha.

Translated from the Brazilian Portuguese original · Read the original