Recharts堆叠柱状图：实现带圆角的重叠柱状效果

问题 #

要做一个带圆角的堆叠柱状图，要求柱状条呈现重叠效果，但目前搞不定两个点：

• 无法实现柱状条的重叠展示
• 无法为每个柱状条添加下一个条颜色的背景
  目前用红色填充了背景，但完全达不到预期效果。

解决办法 #

用Recharts的话，默认堆叠逻辑实现不了这种重叠效果，得手动自定义：

1. 放弃默认堆叠：移除所有Bar的stackId，让它们共用同一个x轴数据，通过调整width和offset属性控制每个条的位置与宽度，实现重叠
2. 分层设置圆角：针对不同层级的Bar设置不同方向的radius，比如最上层条只设左侧圆角，下层条设右侧圆角，避免上层圆角完全覆盖下层
3. 模拟背景色：给每个Bar额外渲染一个同尺寸的底层元素，颜色设为下一个Bar的颜色，或者直接在Bar组件内自定义渲染背景rect

代码示例 #

import React from "react";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from "recharts";

const data = [
  { name: "A", value1: 400, value2: 300, value3: 200 },
  { name: "B", value1: 300, value2: 200, value3: 100 },
  { name: "C", value1: 200, value2: 100, value3: 50 }
];

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

export default function App() {
  return (
    <BarChart
      width={500}
      height={300}
      data={data}
      margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      {/* 最底层：右侧圆角，位置偏左 */}
      <Bar
        dataKey="value1"
        fill={COLORS[0]}
        width={60}
        offset={-10}
        radius={[0, 10, 10, 0]}
        zIndex={1}
      />
      {/* 中间层：左右圆角，位置居中 */}
      <Bar
        dataKey="value2"
        fill={COLORS[1]}
        width={60}
        offset={0}
        radius={[0, 10, 10, 0]}
        zIndex={2}
      />
      {/* 最上层：左侧圆角，位置偏右，同时渲染背景层 */}
      <Bar
        dataKey="value3"
        fill={COLORS[2]}
        width={60}
        offset={10}
        radius={[10, 0, 0, 10]}
        zIndex={3}
      >
        {data.map((entry, idx) => {
          const barHeight = (entry.value3 * 240) / 400; // 按Y轴范围计算条高度
          const xPos = idx * 100 + 30 + 10; // 对应offset调整x轴位置
          const yPos = 300 - barHeight;
          return (
            <rect
              key={`bg-${idx}`}
              x={xPos}
              y={yPos}
              width={60}
              height={barHeight}
              fill={COLORS[1]}
              rx={10}
              ry={10}
              zIndex={2}
            />
          );
        })}
      </Bar>
    </BarChart>
  );
}

注意事项 #

• 用zIndex控制层级：上层条的zIndex要高于下层，背景层的zIndex夹在对应两层之间
• 调整offset和width可以控制重叠程度，根据需求自行调试数值
• 圆角必须分层设置，否则上层条会完全遮挡下层的圆角
• 背景层的位置和高度要和对应Bar的位置高度严格对齐，避免错位

内容的提问来源于stack exchange，提问作者Rodrigo