定义
Recharts 是一个用 React 组件构建的可组合图表库（composable charting library）[1]。它的目标是让开发者在 React 应用中编写图表时不必处理繁琐的绘图细节[4]。库中每个图表都由若干相互独立的 React 组件拼装而成，组件本身只负责呈现，不持有业务逻辑[4]。
以折线图为例，图表容器决定坐标系，坐标轴组件、网格组件、浮层提示组件与数据序列组件分别承担不同职责，任何一项都可以被替换、定制或移除[5]。Recharts 以原生 SVG 元素作为渲染载体，对 D3 的依赖仅限于部分子模块，因此体积相对可控[1]。项目采用 MIT 许可证发布，版权由 Recharts Group 持有[6]。
原理
Recharts 的渲染路径可以概括为：数据数组经比例尺映射为坐标，坐标再被转换为 SVG 元素的属性。开发者向图表容器传入对象数组，数据序列组件通过 dataKey 属性指定要读取的字段名，该字段既可以是字符串形式的直接属性，也可以是点号路径表示的嵌套属性，还可以是自定义的取值函数[7]。
在内部，Recharts 借助 D3 的 scale 与 shape 子模块完成数值到坐标的换算以及路径字符串的生成，再用 React 元素描述对应的 SVG 图形，由 React 负责差异比对与更新[8]。曲线插值方式通过 type 属性指定，可选值包括 basis、linear、monotone、step 等，决定数据点在折线中被连接成何种形状[7]。
由于 SVG 本身是矢量描述，图表在任意缩放比例下都能保持清晰边缘，同时保留了 SVG 的可访问性特征与事件能力[5]。库还提供了响应式容器组件，它以父元素的尺寸作为图表尺寸，使图表能随页面布局变化自动调整[7]。
发展历程
Recharts 的代码仓库创建于 2015 年 8 月 7 日[3]。早期版本的说明中，该项目被描述为「用 React 和 D3 重写的图表库」，并列出了三条设计主张：以 React 组件方式部署、原生支持 SVG、组件保持声明式[9]。
0.x 系列持续扩充图表种类与交互能力，例如在 2016 年内陆续加入了雷达图、树状图、桑基图等图表类型[10]。2018 年 7 月，项目发布 1.0.0 正式版，此前经历了较长时间的 1.0.0-beta 与 alpha 迭代[10]。
2019 年 12 月启动 2.0.0 的开发，该版本改用 TypeScript 重写源码，并仅支持 React 16 及更高版本[10]。2.0.0 于 2020 年 12 月 29 日正式发布[10]。此后项目转向 3.x 系列，并发布了从 2.x 升级到 3.0 的迁移指南；据版本页说明，1.x 与 2.x 分支已不再维护，官方建议升级到 v3 以获取新特性与修复[9]。
应用
Recharts 面向需要在 React 界面中嵌入统计图表的场景，适用于单页应用，可与 Webpack 等 CommonJS 模块打包工具配合使用[2]。除 npm 安装外，它也提供 UMD 构建版本，可通过脚本标签引入后从全局对象访问[2]。
在图表类型上，笛卡尔坐标系类别包含折线图、面积图、柱状图、散点图、组合图与漏斗图；极坐标类别包含饼图、雷达图与径向条形图；层次数据类别包含树状图、旭日图与桑基图[5]。其中组合图允许在同一坐标系中混合使用折线、面积与柱状等不同数据序列[5]。
该库也覆盖仪表盘之外的交互需求，例如跨多个图表同步提示与联动、为数据序列添加动画，以及对提示框内容与图例样式做自定义[5]。数据缺失时，可通过相应属性让曲线在空值处保持连接[7]。
局限
Recharts 的图表建立在 SVG 之上，图形元素数量随数据点规模线性增长[5]。针对数据量较大的情形，实践中常见的做法是用 React.memo 减少不必要的重渲染、对数据集预先聚合或分页，以及在数据点密集时关闭动画；这些属于使用层面的缓解手段[11]。
库的定制边界主要由组件属性与自定义组件决定，若所需图形无法由现有属性表达，通常需要自行编写组件而非修改内部实现[1]。使用中也存在若干容易出错的约定，例如数据序列的 dataKey 必须与数据结构中的字段完全一致，否则图表无法正确取值；图表容器需要有明确的宽度和高度，否则可能渲染不出内容[12]。
版本兼容方面存在明确限制：1.x 与 2.x 分支已停止维护，而 3.x 要求 React 16.8 及以上版本，因此停留在旧版 React 的项目无法直接升级到较新的 Recharts 版本[5][9]。
参见
参考资料
- Recharts [引用日期2026-10-14]
- recharts [引用日期2026-10-14]
- github.com/recharts/recharts [引用日期2026-10-14]
- Recharts [引用日期2026-10-14]
- Introduction to Recharts [引用日期2026-10-14]
- README [引用日期2026-10-14]
- Quickstart [引用日期2026-10-14]
- recharts [引用日期2026-10-14]
- recharts - This version has been deprecated [引用日期2026-10-14]
- recharts [引用日期2026-10-14]
- Recharts入门：让React应用数据可视化变得简单 [引用日期2026-10-14]
- Getting started [引用日期2026-10-14]