TanStack/charts

这是什么？

核心功能

• 01Mark 可直接接受数组、对象、元组和可迭代数据，无需改造数据结构。
• 02提供紧凑的线性、带状、点状和有序尺度，也可替换为原生 d3-scale。
• 03支持响应式尺寸、自动坐标轴边距、主题和交互。
• 04支持 SVG 服务端渲染、hydration 和导出。
• 05可选 Canvas 渲染器，减少每个 mark 的 DOM 开销。
• 06同一份图表定义可在多个前端框架及原生 DOM 中复用。

适用场景

• 在 React 或 Vue 应用中添加常见的折线图、柱状图或面积图。
• 为 SSR 页面或静态导出在服务端渲染图表。
• 构建超出常规图表预设的定制化可视化。
• 在多框架代码库中跨框架复用同一份图表定义。

快速上手

1. 1

   安装工作区依赖

   pnpm install
2. 2

   运行集成数据仪表板沙盒示例

   pnpm dev:sandbox

使用前须知

• !该 README 描述的是尚未发布的 main 分支，可能与已发布的 1.1.0 版本不同。
• !开发需要 Node.js 22 或更高版本以及 pnpm 11。
• !Canvas 渲染可降低 DOM 开销，但无法减少场景内存或大型交互图表的最近点计算开销。

收录于专题

标签

常见问题

charts 是什么？

基于细粒度 D3 模块构建的 TypeScript 图表语法库，支持响应式、无障碍和服务端渲染。 TanStack Charts 是一个 TypeScript 可视化库，用 mark、channel 和 scale 的组合来描述图表。Mark 可以直接消费原始数组、对象或可迭代数据，应用无需为了绘图改造自身的数据模型。库内提供紧凑的数值、分类带状、分类点状和有序尺度，也可以在需要更完整语义时直接替换为原生 d3-scale 函数。

charts 可以免费使用吗？用的什么许可证？

charts 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

charts 还在维护吗？

活跃维护中。charts 最近一次提交是在 2026年10月22日。

charts 适合用来做什么？

在 React 或 Vue 应用中添加常见的折线图、柱状图或面积图。 为 SSR 页面或静态导出在服务端渲染图表。 构建超出常规图表预设的定制化可视化。 在多框架代码库中跨框架复用同一份图表定义。

charts 怎么安装和运行？

安装工作区依赖: pnpm install 运行集成数据仪表板沙盒示例: pnpm dev:sandbox

在哪里获取 charts？

源代码和安装说明在 GitHub 上：https://github.com/TanStack/charts