TanStack Chart

项目概述

TanStack Chart 是由 Tanner Linsley 与著名 TanStack 开源团队（TanStack Table、TanStack Query 作者）推出的无头（Headless）数据可视化基建。它将经典的无头逻辑带入图表领域，彻底解耦数据计算与视觉渲染。

核心特性

• ⚡️ 100% 无头架构：负责处理坐标轴比例尺（Scales）、数据流投影与交互事件，样式完全自由。
• 全框架多端通用：同时支持 React、Vue、Svelte、SolidJS 以及原生 TypeScript。
• 极致自由渲染：可自由输出为纯 SVG、HTML 节点、Canvas 或 WebGL 着色器。
• 严谨类型安全：完全由现代 TypeScript 编写，数据结构推导严谨。

快速上手与示例代码

npm install @tanstack/react-charts

import { Chart } from '@tanstack/react-charts';

export default function HeadlessChart() {
  const data = [{ label: '系列1', data: [{ x: 1, y: 10 }, { x: 2, y: 25 }] }];
  return <Chart options={{ data, primaryAxis: { getValue: d => d.x } }} />;
}

技术选型建议与适用场景

• 非常适合：已经深度采用 TanStack Table / Query 技术栈、需要构建完全自主品牌图表体系的资深团队。
• 不适用场景：希望 5 分钟内快速引入预设花哨图表模板的初学者。