如何使用Recharts为动态生成的堆叠柱状图的顶部柱子添加圆角

解决方案 #

你当前的代码给所有堆叠的Bar组件都配置了顶部圆角，因此下层柱子也会显示圆角效果。只需要在遍历渲染Bar时，判断当前是否为最上层的柱子，仅给最上层配置圆角属性即可，是非常快捷的实现方案。
如果你的groups数组遍历顺序是从底层到上层（即后渲染的Bar叠在上方），修改groups.map部分的代码如下：

{groups.map((data, i) => (
  <Bar
    key={i}
    dataKey={data}
    yAxisId="left"
    stackId="a"
    fill={data === groups[0] ? colours[0] : colours[1]}
    barSize={barSize}
    // 仅给最上层的柱子加顶部圆角
    radius={i === groups.length - 1 ? [4, 4, 0, 0] : [0, 0, 0, 0]}
  />
))}

如果你的堆叠顺序相反（先渲染的是上层柱子），把判断条件改成i === 0即可。

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