TanStack Charts: Framework-Agnostic Grammar of Graphics in TypeScript
TanStack Charts is the newest library from Tanner Linsley's team: a framework-agnostic TypeScript take on the grammar of graphics, already at roughly 160,000 weekly downloads while still in Alpha. Instead of a fixed catalog of chart components, it composes marks, scales, channels, transforms and layers, and inferred types stay tied to the source row. One definition renders through adapters for React, Preact, Vue, Solid, Svelte, Angular, Lit and vanilla DOM, on server or client. Installation is a single package, and a basic React line chart is about 29 kB minified and gzipped; the project's controlled comparison puts its suite at 38-45 KiB against 45-58 KiB for Chart.js, 83-92 KiB for Observable Plot and 153-173 KiB for ECharts. The stability guide says Alpha is not a stable API promise and advises pinning an exact version, the repository warns it is not production-ready, and heavy real-time workloads are steered toward hardware-accelerated renderers. Linsley states almost all of the implementation was produced by AI coding agents under his supervision.
TanStack Charts, the newest library from Tanner Linsley and the TanStack team, has arrived as a framework-agnostic visualization grammar for TypeScript, and it is already pulling roughly 160,000 weekly downloads while still officially in Alpha.
Tanner Linsley 和 TanStack 团队的新库 TanStack Charts 已经面世，它是一个面向 TypeScript、不绑定具体框架的可视化语法库。尽管官方状态仍是 Alpha，每周下载量却已经有约 16 万次。
Rather than shipping a fixed catalogue of chart components, TanStack Charts adopts the grammar of graphics tradition established by Leland Wilkinson. Developers compose marks, scales, channels, transforms, and layers instead of picking a chart "type". The runtime is an independent implementation, although its marks-and-channels API is closest to Observable Plot. A defining detail is that inferred types stay connected to the source row, so each mark reads directly from your data shape. The same definition renders through adapters for React, Preact, Vue, Solid, Svelte, Angular, Lit, and a vanilla DOM host, on the server or in the browser.
TanStack Charts 没有提供一份固定的图表组件清单，而是继承了 Leland Wilkinson 开创的图形语法（grammar of graphics）传统。开发者通过组合 mark、scale、channel、transform 和 layer 来搭图表，而不是去挑一个“图表类型”。它的运行时是独立实现的，但 marks-and-channels API 最接近 Observable Plot。一个很关键的细节是：推断出来的类型始终与源数据行保持关联，所以每个 mark 都直接读取你的数据结构。同一份定义可以借助适配器在 React、Preact、Vue、Solid、Svelte、Angular、Lit 以及原生 DOM 宿主中渲染，服务端和浏览器端都行。
Installation is a single package, pnpm add @tanstack/charts, with react and react-dom added as peers for the React adapter, as covered in the installation docs.
安装只要一个包，pnpm add @tanstack/charts；用 React 适配器的话，再把 react 和 react-dom 作为 peer 依赖装上，具体见安装文档。
On Reddit, users are excited, with one commenting on the TypeScript experience:
The guy breathes typescript. The developer experience of all the tan stack libraries is phenomenal!
Another asked about React Native support:
React Native support please! The state of chart libraries in RN is abysmal
Linsley himself replied:
We have an experimental RN adapter. Give it a try! It's in the docs.
Reddit 上讨论很热烈。有人专门夸 TypeScript 体验：
“这哥们儿简直是用 TypeScript 呼吸的。TanStack 全家桶的开发体验都好得离谱！”
也有人来问 React Native 支持：
“求支持 React Native！RN 的图表库生态简直惨不忍睹。”
Linsley 本人回复：
“我们有一个实验性的 RN 适配器，试试看！文档里就有。”
In the release tweet, Linsley described it as "the charting library I always dreamed of". He also marked the official move to Alpha with 11 releases, 188 examples, a full shadcn chart catalog, multiple axes, polar scales, and drillable sunbursts. YouTube walkthroughs such as "TanStack Did It Again... They Fixed Charts" have amplified the launch.
在发布推文里，Linsley 称它是“我一直梦想拥有的图表库”。他同时列出了正式迈入 Alpha 的成果：11 个发布版本、188 个示例、一整套路 shadcn 图表目录、多种坐标轴、极坐标尺度，以及可以下钻的旭日图。YouTube 上《TanStack Did It Again... They Fixed Charts》这样的讲解视频，又给这次发布添了一把火。
One detail from the launch worth paying attention to is how the library was built. Linsley states on the GitHub page that "almost all of the implementation was produced with AI coding agents under my direct supervision", then reviewed and accepted into the project.
这次发布有一点值得留意：这个库是怎么写出来的。Linsley 在 GitHub 页面上写道，“几乎所有实现都是在我的直接监督下由 AI 编码 agent 产出的”，之后再由他审阅并合入项目。
A comparison from SciChart, a commercial competitor, argued that TanStack is "often better suited for simpler chart creations that don't require huge, complex data sets to be processed in real-time", steering heavy real-time workloads toward hardware accelerated renderers. The project's own large data guide is candid on the same point, noting that Canvas removes SVG DOM cost but not scale, guide, or scene compilation work.
商业竞品 SciChart 的对比文章认为，TanStack“往往更适合那些不需要实时处理庞大复杂数据集的简单图表”，并把重度实时负载引向硬件加速渲染器。项目自己的大数据指南在这一点上同样坦率：Canvas 省掉了 SVG 的 DOM 开销，但 scale、guide 和场景编译这些工作量并不会消失。
A basic React line chart weighs about 29 kB minified and gzipped, and the project's own comparison puts its controlled suite around 38 to 45 KiB, against roughly 45 to 58 KiB for Chart.js, 83 to 92 KiB for Observable Plot, 153 to 173 KiB for Apache ECharts, and far larger figures for AG Charts.
一个基础的 React 折线图压缩后（minified + gzip）约 29 kB。按项目自己的对比，它的受控组件套件大约在 38–45 KiB，而 Chart.js 约 45–58 KiB、Observable Plot 83–92 KiB、Apache ECharts 153–173 KiB，AG Charts 还要大得多。
The stability guide states that Alpha "is not a stable API promise" and advises pinning an exact version, and the repository still warns that it is not ready for production. Teams moving across should read the migration guide.
稳定性指南明确说明，Alpha“并不等于稳定的 API 承诺”，建议锁定确切版本；仓库也仍在提示它尚未可用于生产环境。打算迁移过来的团队，应当先读迁移指南。
TanStack is the family of open source, headless, type-safe libraries created by Tanner Linsley, spanning Query, Table, Router, Form, and the full-stack Start framework, and depended on across millions of applications. Charts extends that headless approach to data visualization. It is released under the MIT license and free to use.
TanStack 是 Tanner Linsley 打造的一整套开源、headless、类型安全的库，涵盖 Query、Table、Router、Form 以及全栈框架 Start，被数百万应用所依赖。Charts 把这种 headless 思路延伸到了数据可视化。它基于 MIT 许可发布，可免费使用。