• dataKey="revenue" - 映射到 revenue 属性
• dataKey={(entry) => entry.revenue - entry.expenses} - 用于计算值的函数

组件组合

图表通过嵌套专用组件构建：

尺寸设置 ：使用 responsive 属性（v3.3+）、ResponsiveContainer 包装器或直接设置 width/height

图表类型（选择一种）：

• LineChart - 折线图和面积图可视化
• BarChart - 条形图和柱状图
• AreaChart - 堆叠和填充面积图
• PieChart - 饼图和环形图
• ScatterChart - 散点图和气泡图
• ComposedChart - 混合图表类型
• RadarChart - 雷达图/蜘蛛图
• RadialBarChart - 圆形条形图

常用子组件：

• XAxis / YAxis - 坐标轴配置
• CartesianGrid - 网格线
• Tooltip - 悬停信息
• Legend - 系列标识
• Line / Bar / Area / Pie - 数据系列可视化

按类型划分的图表模式

折线图

<LineChart data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="value" stroke="#8884d8" strokeWidth={2} dot={{ r: 4 }} />
</LineChart>

关键属性：

• type: "monotone"（平滑）、"linear"、"step"、"natural"
• stroke: 线条颜色
• strokeWidth: 线条粗细
• dot: 点样式（设置为 false 以隐藏）
• activeDot: 悬停点样式
• connectNulls: true 以连接间隙

面积图

<AreaChart data={data}>
  <defs>
    <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
    </linearGradient>
  </defs>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Area type="monotone" dataKey="value" stroke="#8884d8" fillOpacity={1} fill="url(#colorValue)" />
</AreaChart>

堆叠面积图：

<Area type="monotone" dataKey="sales" stackId="1" stroke="#8884d8" fill="#8884d8" />
<Area type="monotone" dataKey="profit" stackId="1" stroke="#82ca9d" fill="#82ca9d" />

条形图

<BarChart data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Legend />
  <Bar dataKey="sales" fill="#8884d8" radius={[4, 4, 0, 0]} />
  <Bar dataKey="profit" fill="#82ca9d" radius={[4, 4, 0, 0]} />
</BarChart>

关键属性：

• fill: 条形颜色
• radius: 圆角 [左上, 右上, 右下, 左下] 或所有角使用单个数字
• barSize: 固定条形宽度
• stackId: 将条形分组到堆叠中
• shape: 自定义条形形状（函数或元素）

堆叠条形图：

<Bar dataKey="sales" stackId="a" fill="#8884d8" />
<Bar dataKey="profit" stackId="a" fill="#82ca9d" />

圆角堆叠条形图（使用 BarStack 来圆化整个堆叠）：

import { BarStack } from 'recharts';

<BarChart data={data}>
  <BarStack stackId="a" radius={[4, 4, 0, 0]}>
    <Bar dataKey="sales" fill="#8884d8" />
    <Bar dataKey="profit" fill="#82ca9d" />
  </BarStack>
</BarChart>

饼图

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

<PieChart>
  <Pie
    data={data}
    dataKey="value"
    nameKey="name"
    cx="50%"
    cy="50%"
    innerRadius={60}
    outerRadius={80}
    paddingAngle={5}
    shape={(props) => <Sector {...props} fill={COLORS[props.index % COLORS.length]} />}
  />
  <Tooltip />
  <Legend />
</PieChart>

关键属性：

• innerRadius: 当 > 0 时创建环形图
• outerRadius: 饼图大小
• paddingAngle: 切片之间的间隙
• startAngle / endAngle: 部分饼图（默认：0 到 360）
• label: 在切片上显示值
• shape: 每个切片的自定义渲染（替换已弃用的 Cell 组件）

散点图

<ScatterChart>
  <XAxis type="number" dataKey="x" name="X Axis" />
  <YAxis type="number" dataKey="y" name="Y Axis" />
  <CartesianGrid />
  <Tooltip cursor={{ strokeDasharray: '3 3' }} />
  <Scatter name="Series A" data={data} fill="#8884d8" />
</ScatterChart>

组合图表

混合多种图表类型：

<ComposedChart data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid stroke="#f5f5f5" />
  <Tooltip />
  <Legend />
  <Area type="monotone" dataKey="total" fill="#8884d8" stroke="#8884d8" />
  <Bar dataKey="sales" barSize={20} fill="#413ea0" />
  <Line type="monotone" dataKey="profit" stroke="#ff7300" />
</ComposedChart>

响应式尺寸

选项 1：responsive 属性（Recharts 3.3+，推荐）

在图表本身上设置 responsive。使用标准 CSS 尺寸规则：

<LineChart data={data} width="100%" height={300} responsive>
  {/* chart components */}
</LineChart>

适用于 flexbox 和 CSS 网格布局。也支持 CSS style 属性：

<LineChart data={data} responsive style={{ maxWidth: 800, width: '100%', aspectRatio: '16/9' }}>
  {/* chart components */}
</LineChart>

选项 2：ResponsiveContainer（旧版本）

对于 Recharts < 3.3，将图表包装在 ResponsiveContainer 中：

<ResponsiveContainer width="100%" height={300}>
  <LineChart data={data}>
    {/* chart components */}
  </LineChart>
</ResponsiveContainer>

关键：ResponsiveContainer 必须有一个定义了尺寸的父元素。高度必须是数字，不能是百分比。

静态尺寸

直接设置 width 和 height 为像素或百分比：

<LineChart data={data} width={600} height={300}>
  {/* chart components */}
</LineChart>

坐标轴配置

XAxis / YAxis 属性

<XAxis 
  dataKey="name"           // 要显示的属性
  type="category"          // "category" 或 "number"
  domain={[0, 'dataMax']}    // 坐标轴范围
  tick={{ fill: '#666' }}    // 刻度样式
  tickFormatter={(value) => `$${value}`}  // 格式化标签
  angle={-45}               // 旋转标签
  textAnchor="end"         // 文本对齐
  height={60}              // 标签的额外空间
/>

坐标轴类型

• 分类坐标轴（X 轴默认）：将值视为离散标签
• 数值坐标轴（Y 轴默认）：将值视为连续比例尺

自定义定义域

控制坐标轴范围：

// 固定范围
<YAxis domain={[0, 100]} />

// 自动带填充
<YAxis domain={[0, 'auto']} />

// 基于数据，允许溢出
<YAxis domain={[0, 'dataMax + 100']} allowDataOverflow />

// 对数比例尺
<YAxis type="number" scale="log" domain={['auto', 'auto']} />

自定义

自定义工具提示

const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div className="custom-tooltip">
        <p className="label">{`${label}`}</p>
        <p className="intro">{`Sales: ${payload[0].value}`}</p>
        <p className="desc">Additional info...</p>
      </div>
    );
  }
  return null;
};

<Tooltip content={<CustomTooltip />} />

自定义图例

const CustomLegend = ({ payload }) => (
  <ul>
    {payload.map((entry, index) => (
      <li key={`item-${index}`} style={{ color: entry.color }}>
        {entry.value}
      </li>
    ))}
  </ul>
);

<Legend content={<CustomLegend />} />

自定义形状

自定义条形形状：

const CustomBar = (props) => {
  const { x, y, width, height, fill } = props;
  return <path d={`M${x},${y} ...`} fill={fill} />;
};

<Bar shape={<CustomBar />} dataKey="sales" />
// 或者
<Bar shape={(props) => <CustomBar {...props} />} dataKey="sales" />

自定义标签

<Line 
  dataKey="sales" 
  label={{ position: 'top', fill: '#666', fontSize: 12 }}
/>

// 自定义标签组件
<Line 
  dataKey="sales" 
  label={<CustomLabel />}
/>

样式

图表样式：

<LineChart style={{ backgroundColor: '#f5f5f5' }}>

坐标轴样式：

<XAxis 
  axisLine={{ stroke: '#666' }}
  tickLine={{ stroke: '#666' }}
  tick={{ fill: '#666', fontSize: 12 }}
/>

网格样式：

<CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />

交互

活动元素和交互控制

Tooltip 组件控制活动元素高亮。不要使用 activeIndex 属性（已在 v3 中移除）。

工具提示交互属性：

• defaultIndex: 在渲染时设置初始高亮项

• active: 如果为 true，交互结束后工具提示保持活动状态

• trigger: "hover"（默认）或 "click" 用于基于点击的交互

• content: 自定义内容或 () => null 以在保持高亮的同时隐藏工具提示文本

• cursor: 绘图区域中的视觉光标，设置为 false 以隐藏

  {/* 基于点击的交互，隐藏工具提示文本 */} <Tooltip trigger="click" content={() => null} cursor={false} />

  {/* 渲染时默认高亮项 */} <Tooltip defaultIndex={2} />

点击事件

<LineChart onClick={(e) => console.log(e)}>
  <Bar 
    dataKey="sales" 
    onClick={(data, index) => console.log('Bar clicked:', data)}
  />
</LineChart>

同步图表

使用 syncId 链接多个图表：

<LineChart data={data1} syncId="anyId">
  {/* components */}
</LineChart>

<LineChart data={data2} syncId="anyId">
  {/* components - tooltips synchronize */}
</LineChart>

用于缩放的画笔

<LineChart data={data}>
  {/* other components */}
  <Brush dataKey="name" height={30} stroke="#8884d8" />
</LineChart>

性能优化

1. 稳定的引用

对属性使用 useMemo 和 useCallback：

// 不好 - 每次渲染都创建新函数
<Line dataKey={(entry) => entry.sales * 2} />

// 好 - 稳定的引用
const dataKey = useCallback((entry) => entry.sales * 2, []);
<Line dataKey={dataKey} />

2. 记忆化组件

const MemoizedChart = React.memo(({ data }) => (
  <LineChart data={data}>
    {/* components */}
  </LineChart>
));

3. 隔离变化的组件

分离频繁更新的组件：

const Chart = () => {
  const [hoveredData, setHoveredData] = useState(null);
  
  return (
    <LineChart>
      {/* 静态组件 */}
      <Line dataKey="sales" />
      
      {/* 动态覆盖层 */}
      <ReferenceLine x={hoveredData?.x} stroke="red" />
    </LineChart>
  );
};

4. 防抖事件

import { useDebouncedCallback } from 'use-debounce';

const handleMouseMove = useDebouncedCallback((e) => {
  setPosition(e.activeLabel);
}, 10);

<LineChart onMouseMove={handleMouseMove}>

5. 减少数据点

对于大型数据集，考虑聚合：

// 在渲染前分箱数据
const binnedData = useMemo(() => {
  return d3.bin().value(d => d.x)(rawData);
}, [rawData]);

可访问性

Recharts 包含内置的可访问性支持：

<LineChart accessibilityLayer={true}>
  <Line dataKey="sales" name="Monthly Sales" />
</LineChart>

默认启用可访问性。图表支持键盘导航和屏幕阅读器兼容。

ARIA 属性：

<LineChart role="img" aria-label="Sales chart showing monthly revenue">

常见模式

多数据系列

<LineChart data={data}>
  <XAxis dataKey="month" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="productA" name="Product A" stroke="#8884d8" />
  <Line type="monotone" dataKey="productB" name="Product B" stroke="#82ca9d" />
  <Line type="monotone" dataKey="productC" name="Product C" stroke="#ffc658" />
</LineChart>

水平条形图

<BarChart layout="vertical" data={data}>
  <XAxis type="number" />
  <YAxis type="category" dataKey="name" />
  <Bar dataKey="value" />
</BarChart>

环形图

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

<PieChart>
  <Pie
    data={data}
    innerRadius={60}
    outerRadius={80}
    paddingAngle={5}
    dataKey="value"
    shape={(props) => <Sector {...props} fill={COLORS[props.index % COLORS.length]} />}
  />
</PieChart>

注意：Cell 组件已弃用，将在 Recharts 4.0 中移除。请改用 Bar、Pie、Scatter 等上的 shape 属性。

参考线/参考区域

<LineChart data={data}>
  {/* ... */}
  <ReferenceLine y={5000} label="Target" stroke="red" strokeDasharray="3 3" />
  <ReferenceArea x1="Jan" x2="Mar" fill="#8884d8" fillOpacity={0.1} />
</LineChart>

误差条

<ScatterChart>
  <Scatter data={data}>
    <ErrorBar dataKey="errorX" width={4} strokeWidth={2} />
    <ErrorBar dataKey="errorY" width={4} strokeWidth={2} direction="y" />
  </Scatter>
</ScatterChart>

集成模式

与状态管理结合

const SalesChart = () => {
  const [timeRange, setTimeRange] = useState('month');
  const data = useSelector(state => selectSalesData(state, timeRange));
  
  return (
    <ResponsiveContainer>
      <LineChart data={data}>
        {/* components */}
      </LineChart>
    </ResponsiveContainer>
  );
};

与实时数据结合

const RealtimeChart = () => {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setData(prev => [...prev.slice(-20), newDataPoint]);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  
  return (
    <LineChart data={data}>
      <XAxis dataKey="time" />
      <YAxis domain={['auto', 'auto']} />
      <Line type="monotone" dataKey="value" isAnimationActive={false} />
    </LineChart>
  );
};

Z-Index 和图层（v3.4+）

组件按默认顺序渲染（网格 < 坐标轴 < 图表元素 < 工具提示/图例）。使用 zIndex 属性覆盖：

<Line dataKey="sales" zIndex={10} />  // 在顶部渲染

对于没有直接 zIndex 支持的组件，包装在 ZIndexLayer 中：

import { ZIndexLayer } from 'recharts';

<ZIndexLayer zIndex={5}>
  <CustomAnnotation />
</ZIndexLayer>

坐标系

Recharts 有三种坐标系：

1. 定义域坐标 - 数据值（例如，x="March"、y=5000）。由 ReferenceLine、ReferenceDot、ReferenceArea 使用。自动转换为像素。
2. 像素坐标 - 相对于图表 viewBox 的位置。用于自定义 SVG 形状。通过 usePlotArea()、useOffset()、useChartWidth() 钩子访问。
3. 鼠标事件坐标 - 浏览器视口坐标。使用 getRelativeCoordinate(event, element) 转换。

系统间转换：

• 数据到像素：useXAxisScale()、useYAxisScale()
• 像素到数据：useXAxisInverseScale()、useYAxisInverseScale()

故障排除

图表未渲染

• 确保 ResponsiveContainer 有一个定义了尺寸的父元素
• 检查高度是否为数字（在 ResponsiveContainer 中不能是百分比）
• 验证数据是对象数组

工具提示未显示

• 确保包含 Tooltip 组件
• 检查 dataKey 值是否存在于数据对象中

坐标轴标签重叠

• 旋转标签：<XAxis angle={-45} textAnchor="end" height={80} />
• 使用间隔：<XAxis interval={0} />（0 = 显示所有，'preserveStartEnd' = 自动）

动画问题

• 禁用：<Line isAnimationActive={false} />
• 减少持续时间：<Line animationDuration={500} />

资源

参考

• API 参考 - 完整的组件属性和 API 详情
• 示例 - 常见图表模式和代码片段
• 最佳实践 - 性能和设计指南

外部资源

• 官方文档
• Storybook
• GitHub

每周安装数

66

仓库

ansanabria/skills

首次出现

2026年2月17日

安全审计

Gen Agent Trust HubPassSocketPassSnykPass

已安装于

cursor64

github-copilot63

opencode63

gemini-cli62

codex62

kimi-cli60

Use dataKey props to map object properties to chart components:

• dataKey="revenue" - maps to the revenue property
• dataKey={(entry) => entry.revenue - entry.expenses} - function for computed values

Component Composition

Charts are built by nesting specialized components:

Sizing : Use the responsive prop (v3.3+), ResponsiveContainer wrapper, or set width/height directly

Chart types (choose one):

• LineChart - Line and area visualizations
• BarChart - Bar and column charts
• AreaChart - Stacked and filled area charts
• PieChart - Pie and donut charts
• ScatterChart - Scatter plots and bubble charts
• ComposedChart - Mixed chart types
• RadarChart - Radar/spider charts
• RadialBarChart - Circular bar charts

Common child components :

• XAxis / YAxis - Axis configuration
• CartesianGrid - Grid lines
• Tooltip - Hover information
• Legend - Series identification
• Line / Bar / Area / Pie - Data series visualization

Chart Patterns by Type

Line Charts

<LineChart data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="value" stroke="#8884d8" strokeWidth={2} dot={{ r: 4 }} />
</LineChart>

Key props :

• type: "monotone" (smooth), "linear", "step", "natural"
• stroke: line color
• strokeWidth: line thickness
• dot: point styling (set to false to hide)
• activeDot: hovered point styling
• connectNulls: true to connect gaps

Area Charts

<AreaChart data={data}>
  <defs>
    <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
    </linearGradient>
  </defs>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Area type="monotone" dataKey="value" stroke="#8884d8" fillOpacity={1} fill="url(#colorValue)" />
</AreaChart>

Stacked areas :

<Area type="monotone" dataKey="sales" stackId="1" stroke="#8884d8" fill="#8884d8" />
<Area type="monotone" dataKey="profit" stackId="1" stroke="#82ca9d" fill="#82ca9d" />

Bar Charts

<BarChart data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Legend />
  <Bar dataKey="sales" fill="#8884d8" radius={[4, 4, 0, 0]} />
  <Bar dataKey="profit" fill="#82ca9d" radius={[4, 4, 0, 0]} />
</BarChart>

Key props :

• fill: bar color
• radius: rounded corners [topLeft, topRight, bottomRight, bottomLeft] or single number for all corners
• barSize: fixed bar width
• stackId: group bars into stacks
• shape: custom bar shape (function or element)

Stacked bars :

<Bar dataKey="sales" stackId="a" fill="#8884d8" />
<Bar dataKey="profit" stackId="a" fill="#82ca9d" />

Rounded stacked bars (use BarStack to round the whole stack):

import { BarStack } from 'recharts';

<BarChart data={data}>
  <BarStack stackId="a" radius={[4, 4, 0, 0]}>
    <Bar dataKey="sales" fill="#8884d8" />
    <Bar dataKey="profit" fill="#82ca9d" />
  </BarStack>
</BarChart>

Pie Charts

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

<PieChart>
  <Pie
    data={data}
    dataKey="value"
    nameKey="name"
    cx="50%"
    cy="50%"
    innerRadius={60}
    outerRadius={80}
    paddingAngle={5}
    shape={(props) => <Sector {...props} fill={COLORS[props.index % COLORS.length]} />}
  />
  <Tooltip />
  <Legend />
</PieChart>

Key props :

• innerRadius: creates donut chart when > 0
• outerRadius: pie size
• paddingAngle: gap between slices
• startAngle / endAngle: partial pie (default: 0 to 360)
• label: shows values on slices
• shape: custom render for each slice (replaces deprecated Cell component)

Scatter Charts

<ScatterChart>
  <XAxis type="number" dataKey="x" name="X Axis" />
  <YAxis type="number" dataKey="y" name="Y Axis" />
  <CartesianGrid />
  <Tooltip cursor={{ strokeDasharray: '3 3' }} />
  <Scatter name="Series A" data={data} fill="#8884d8" />
</ScatterChart>

Composed Charts

Mix multiple chart types:

<ComposedChart data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid stroke="#f5f5f5" />
  <Tooltip />
  <Legend />
  <Area type="monotone" dataKey="total" fill="#8884d8" stroke="#8884d8" />
  <Bar dataKey="sales" barSize={20} fill="#413ea0" />
  <Line type="monotone" dataKey="profit" stroke="#ff7300" />
</ComposedChart>

Responsive Sizing

Option 1: responsive prop (Recharts 3.3+, recommended)

Set responsive on the chart itself. Uses standard CSS sizing rules:

<LineChart data={data} width="100%" height={300} responsive>
  {/* chart components */}
</LineChart>

Works with flexbox and CSS grid layouts. Also supports CSS style props:

<LineChart data={data} responsive style={{ maxWidth: 800, width: '100%', aspectRatio: '16/9' }}>
  {/* chart components */}
</LineChart>

Option 2: ResponsiveContainer (older versions)

For Recharts < 3.3, wrap chart in ResponsiveContainer:

<ResponsiveContainer width="100%" height={300}>
  <LineChart data={data}>
    {/* chart components */}
  </LineChart>
</ResponsiveContainer>

Critical : ResponsiveContainer must have a parent with defined dimensions. Height must be a number, not a percentage.

Static sizing

Set width and height directly as pixels or percentages:

<LineChart data={data} width={600} height={300}>
  {/* chart components */}
</LineChart>

Axes Configuration

XAxis / YAxis Props

<XAxis 
  dataKey="name"           // property to display
  type="category"          // "category" or "number"
  domain={[0, 'dataMax']}    // axis range
  tick={{ fill: '#666' }}    // tick styling
  tickFormatter={(value) => `$${value}`}  // format labels
  angle={-45}               // rotate labels
  textAnchor="end"         // text alignment
  height={60}              // extra space for labels
/>

Axis Types

• Category axis (default for X): Treats values as discrete labels
• Number axis (default for Y): Treats values as continuous scale

Custom Domains

Control axis range:

// Fixed range
<YAxis domain={[0, 100]} />

// Auto with padding
<YAxis domain={[0, 'auto']} />

// Data-based with overflow allowed
<YAxis domain={[0, 'dataMax + 100']} allowDataOverflow />

// Logarithmic scale
<YAxis type="number" scale="log" domain={['auto', 'auto']} />

Customization

Custom Tooltip

const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div className="custom-tooltip">
        <p className="label">{`${label}`}</p>
        <p className="intro">{`Sales: ${payload[0].value}`}</p>
        <p className="desc">Additional info...</p>
      </div>
    );
  }
  return null;
};

<Tooltip content={<CustomTooltip />} />

Custom Legend

const CustomLegend = ({ payload }) => (
  <ul>
    {payload.map((entry, index) => (
      <li key={`item-${index}`} style={{ color: entry.color }}>
        {entry.value}
      </li>
    ))}
  </ul>
);

<Legend content={<CustomLegend />} />

Custom Shapes

Custom bar shape :

const CustomBar = (props) => {
  const { x, y, width, height, fill } = props;
  return <path d={`M${x},${y} ...`} fill={fill} />;
};

<Bar shape={<CustomBar />} dataKey="sales" />
// OR
<Bar shape={(props) => <CustomBar {...props} />} dataKey="sales" />

Custom Labels

<Line 
  dataKey="sales" 
  label={{ position: 'top', fill: '#666', fontSize: 12 }}
/>

// Custom label component
<Line 
  dataKey="sales" 
  label={<CustomLabel />}
/>

Styling

Chart styles :

<LineChart style={{ backgroundColor: '#f5f5f5' }}>

Axis styling :

<XAxis 
  axisLine={{ stroke: '#666' }}
  tickLine={{ stroke: '#666' }}
  tick={{ fill: '#666', fontSize: 12 }}
/>

Grid styling :

<CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />

Interactions

Active Elements and Interaction Control

The Tooltip component controls active element highlighting. Do not use activeIndex prop (removed in v3).

Tooltip interaction props :

• defaultIndex: Sets initial highlighted item on render

• active: If true, tooltip remains active after interaction ends

• trigger: "hover" (default) or "click" for click-based interaction

• content: Custom content or () => null to hide tooltip text while keeping highlight

• cursor: Visual cursor in plot area, set to false to hide

  {/* Click-based interaction with hidden tooltip text */} <Tooltip trigger="click" content={() => null} cursor={false} />

  {/* Default highlighted item on render */} <Tooltip defaultIndex={2} />

Click Events

<LineChart onClick={(e) => console.log(e)}>
  <Bar 
    dataKey="sales" 
    onClick={(data, index) => console.log('Bar clicked:', data)}
  />
</LineChart>

Synchronized Charts

Link multiple charts with syncId:

<LineChart data={data1} syncId="anyId">
  {/* components */}
</LineChart>

<LineChart data={data2} syncId="anyId">
  {/* components - tooltips synchronize */}
</LineChart>

Brush for Zooming

<LineChart data={data}>
  {/* other components */}
  <Brush dataKey="name" height={30} stroke="#8884d8" />
</LineChart>

Performance Optimization

1. Stable References

Use useMemo and useCallback for props:

// BAD - new function on every render
<Line dataKey={(entry) => entry.sales * 2} />

// GOOD - stable reference
const dataKey = useCallback((entry) => entry.sales * 2, []);
<Line dataKey={dataKey} />

2. Memoize Components

const MemoizedChart = React.memo(({ data }) => (
  <LineChart data={data}>
    {/* components */}
  </LineChart>
));

3. Isolate Changing Components

Separate frequently updating components:

const Chart = () => {
  const [hoveredData, setHoveredData] = useState(null);
  
  return (
    <LineChart>
      {/* Static components */}
      <Line dataKey="sales" />
      
      {/* Dynamic overlay */}
      <ReferenceLine x={hoveredData?.x} stroke="red" />
    </LineChart>
  );
};

4. Debounce Events

import { useDebouncedCallback } from 'use-debounce';

const handleMouseMove = useDebouncedCallback((e) => {
  setPosition(e.activeLabel);
}, 10);

<LineChart onMouseMove={handleMouseMove}>

5. Reduce Data Points

For large datasets, consider aggregation:

// Bin data before rendering
const binnedData = useMemo(() => {
  return d3.bin().value(d => d.x)(rawData);
}, [rawData]);

Accessibility

Recharts includes built-in accessibility support:

<LineChart accessibilityLayer={true}>
  <Line dataKey="sales" name="Monthly Sales" />
</LineChart>

Accessibility is enabled by default. The chart is keyboard navigable and screen reader compatible.

ARIA props :

<LineChart role="img" aria-label="Sales chart showing monthly revenue">

Common Patterns

Multiple Data Series

<LineChart data={data}>
  <XAxis dataKey="month" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="productA" name="Product A" stroke="#8884d8" />
  <Line type="monotone" dataKey="productB" name="Product B" stroke="#82ca9d" />
  <Line type="monotone" dataKey="productC" name="Product C" stroke="#ffc658" />
</LineChart>

Horizontal Bar Chart

<BarChart layout="vertical" data={data}>
  <XAxis type="number" />
  <YAxis type="category" dataKey="name" />
  <Bar dataKey="value" />
</BarChart>

Donut Chart

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

<PieChart>
  <Pie
    data={data}
    innerRadius={60}
    outerRadius={80}
    paddingAngle={5}
    dataKey="value"
    shape={(props) => <Sector {...props} fill={COLORS[props.index % COLORS.length]} />}
  />
</PieChart>

Note : Cell component is deprecated and will be removed in Recharts 4.0. Use the shape prop on Bar, Pie, Scatter, etc. instead.

Reference Lines/Areas

<LineChart data={data}>
  {/* ... */}
  <ReferenceLine y={5000} label="Target" stroke="red" strokeDasharray="3 3" />
  <ReferenceArea x1="Jan" x2="Mar" fill="#8884d8" fillOpacity={0.1} />
</LineChart>

Error Bars

<ScatterChart>
  <Scatter data={data}>
    <ErrorBar dataKey="errorX" width={4} strokeWidth={2} />
    <ErrorBar dataKey="errorY" width={4} strokeWidth={2} direction="y" />
  </Scatter>
</ScatterChart>

Integration Patterns

With State Management

const SalesChart = () => {
  const [timeRange, setTimeRange] = useState('month');
  const data = useSelector(state => selectSalesData(state, timeRange));
  
  return (
    <ResponsiveContainer>
      <LineChart data={data}>
        {/* components */}
      </LineChart>
    </ResponsiveContainer>
  );
};

With Real-time Data

const RealtimeChart = () => {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setData(prev => [...prev.slice(-20), newDataPoint]);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  
  return (
    <LineChart data={data}>
      <XAxis dataKey="time" />
      <YAxis domain={['auto', 'auto']} />
      <Line type="monotone" dataKey="value" isAnimationActive={false} />
    </LineChart>
  );
};

Z-Index and Layering (v3.4+)

Components render in a default order (grid < axes < chart elements < tooltip/legend). Override with zIndex prop:

<Line dataKey="sales" zIndex={10} />  // Render on top

For components without direct zIndex support, wrap in ZIndexLayer:

import { ZIndexLayer } from 'recharts';

<ZIndexLayer zIndex={5}>
  <CustomAnnotation />
</ZIndexLayer>

Coordinate Systems

Recharts has three coordinate systems:

1. Domain coordinates - Data values (e.g., x="March", y=5000). Used by ReferenceLine, ReferenceDot, ReferenceArea. Automatically converted to pixels.
2. Pixel coordinates - Positions relative to chart viewBox. Used for custom SVG shapes. Access via usePlotArea(), useOffset(), useChartWidth() hooks.
3. Mouse event coordinates - Browser viewport coordinates. Convert with getRelativeCoordinate(event, element).

Converting between systems :

• Data to pixels: useXAxisScale(), useYAxisScale()
• Pixels to data: useXAxisInverseScale(), useYAxisInverseScale()

Troubleshooting

Chart Not Rendering

• Ensure ResponsiveContainer has a parent with defined dimensions
• Check that height is a number (not percentage in ResponsiveContainer)
• Verify data is an array of objects

Tooltip Not Showing

• Ensure Tooltip component is included
• Check that dataKey values exist in data objects

Axis Labels Overlapping

• Rotate labels: <XAxis angle={-45} textAnchor="end" height={80} />
• Use interval: <XAxis interval={0} /> (0 = show all, 'preserveStartEnd' = auto)

Animation Issues

• Disable: <Line isAnimationActive={false} />
• Reduce duration: <Line animationDuration={500} />

Resources

References

• API Reference - Complete component props and API details
• Examples - Common chart patterns and code snippets
• Best Practices - Performance and design guidelines

External Resources

• Official Documentation
• Storybook
• GitHub

Weekly Installs

66

Repository

ansanabria/skills

First Seen

Feb 17, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

cursor64

github-copilot63

opencode63

gemini-cli62

codex62

kimi-cli60