如何在 Recharts 条形图中的每个条形图的顶部添加边框？

Question

我正在使用 Recharts 创建条形图并想在每个条形图的顶部添加边框，类似于此示例：

如何实现这种效果？

Answer 1

您可以尝试使用自定义形状为每个栏添加边框，例如：

const BarWithBorder = (borderHeight, borderColor) => {
  return (props) => {
    const { fill, x, y, width, height } = props;
    return (
      <g>
        <rect x={x} y={y} width={width} height={height} stroke="none" fill={fill} />
        <rect x={x} y={y} width={width} height={borderHeight} stroke="none" fill={borderColor} />
      </g>
    );
  };
};

然后可以通过为 <Bar /> 指定 shape 属性来使用它：

<BarChart width={300} height={300} data={data}>
  <Bar dataKey="a" stackId="a" fill="#8884d8" shape={BarWithBorder(3, "#ff0000")} />
  <Bar dataKey="b" stackId="a" fill="#82ca9d" shape={BarWithBorder(3, "#00ff00")} />
</BarChart>

有关 <Bar /> 的 shape 属性的文档，请参阅 https://codesandbox.io/s/stacked-bar-chart-forked-sjcg8 for an example and https://recharts.org/en-US/api/Bar#background。

如何在 Recharts 条形图中的每个条形图的顶部添加边框？

How can I add a border to the top of every bar in a Recharts bar chart?

javascript

recharts