recharts

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

You build Recharts charts integrated with HeroUI v3 design tokens and Tailwind CSS v4. Infer the project's language variant (US/UK English) from existing commits, docs, and code, and match it in all output.

Read individual rule files in

rules/

for detailed patterns and code examples.

你需要构建集成了HeroUI v3设计令牌和Tailwind CSS v4的Recharts图表。从现有提交记录、文档和代码中推断项目的语言变体（美式/英式英语），并在所有输出中保持一致。

请阅读

rules/

目录下的单个规则文件，获取详细模式和代码示例。

Rules Overview

规则概述

Rule	Impact	File
Container pattern	HIGH	`rules/container-pattern.md`
Theme integration	HIGH	`rules/theme-integration.md`
Custom components	HIGH	`rules/custom-components.md`

规则	影响程度	文件
容器模式	高	`rules/container-pattern.md`
主题集成	高	`rules/theme-integration.md`
自定义组件	高	`rules/custom-components.md`

Workflow

工作流程

Building a chart?

构建图表？

Detect setup — Confirm
```
recharts
```
is in
```
package.json
```
. Check if HeroUI v3 is installed (
```
@heroui/react
```
or individual packages). Detect Tailwind CSS v4 (
```
@tailwindcss/*
```
).
Read rules — Read all files in
```
rules/
```
to load the container pattern, theme token mapping, and custom component templates.
Fetch theme tokens — Use
```
mcp__heroui-react__get_theme_variables
```
to confirm the current HeroUI token names available in the project.
Generate component — Build the chart component applying all three rules: outer container wrapper, CSS variable colours, and custom tooltip/legend.
Verify — Check the generated code against each rule. Confirm no hardcoded hex colours,
```
ResponsiveContainer
```
is wrapped correctly, and tooltip uses HeroUI classes.

检测环境配置 — 确认
```
package.json
```
中包含
```
recharts
```
。检查是否已安装HeroUI v3（
```
@heroui/react
```
或独立包）。检测是否安装了Tailwind CSS v4（
```
@tailwindcss/*
```
）。
阅读规则 — 阅读
```
rules/
```
目录下的所有文件，加载容器模式、主题令牌映射和自定义组件模板。
获取主题令牌 — 使用
```
mcp__heroui-react__get_theme_variables
```
确认项目中可用的当前HeroUI令牌名称。
生成组件 — 构建图表组件并应用以下三条规则：外部容器包装器、CSS变量颜色、自定义提示框/图例。
验证 — 根据每条规则检查生成的代码。确认没有硬编码的十六进制颜色、
```
ResponsiveContainer
```
已正确包装，且提示框使用了HeroUI类。

Reviewing existing charts?

评审现有图表？

Scan — Glob for files importing from
```
recharts
```
. Read each file and check against every rule in
```
rules/
```
.
Report — List violations grouped by rule with file paths and line numbers.
Fix — Apply corrections using the Edit tool, one violation at a time.

扫描文件 — 查找所有导入
```
recharts
```
的文件。读取每个文件并对照
```
rules/
```
目录下的每条规则进行检查。
生成报告 — 按规则分组列出违规项，包含文件路径和行号。
修复问题 — 使用编辑工具逐一修复每个违规项。

Quick Reminders

快速提示

Always add
```
<AccessibilityLayer />
```
as the first child inside every chart for screen reader support
Set
```
isAnimationActive={false}
```
on chart elements when inside components that re-render frequently (tables, filters)
Recharts uses SVG — style with
```
stroke
```
and
```
fill
```
props, not CSS
```
color
```
Export chart prop interfaces separately so consumers can extend them
Use
```
cartesianGrid
```
with
```
strokeDasharray="3 3"
```
and theme-aware stroke colour
Never set a fixed
```
width
```
on
```
ResponsiveContainer
```
— it must always be
```
width="100%"
```

始终在每个图表内部添加
```
<AccessibilityLayer />
```
作为第一个子元素，以支持屏幕阅读器
当图表位于频繁重渲染的组件（表格、过滤器）内部时，需在图表元素上设置
```
isAnimationActive={false}
```
Recharts使用SVG——请使用
```
stroke
```
和
```
fill
```
属性设置样式，而非CSS的
```
color
```
属性
单独导出图表的属性接口，以便使用者可以扩展它们
使用
```
cartesianGrid
```
时设置
```
strokeDasharray="3 3"
```
，并使用与主题匹配的描边颜色
切勿为
```
ResponsiveContainer
```
设置固定
```
width
```
——它必须始终设为
```
width="100%"
```

Assumptions

前提假设

React + TypeScript project
Recharts installed (
```
recharts
```
in dependencies)
HeroUI v3 installed with Tailwind CSS v4
CSS variables from HeroUI theme are available globally

React + TypeScript项目
已安装Recharts（依赖项中包含
```
recharts
```
）
已安装HeroUI v3和Tailwind CSS v4
HeroUI主题的CSS变量已全局可用