reactjs - 如何在 Recharts 条形图中的每个分组条之间获得内部填充（或间隙）？

Question

我正在尝试实现与 Nivo Charts 使用的 Inner Padding 类似的效果，但在 Recharts 中。

我有以下栏：

但我想让它看起来更像这个（不是在颜色方面，而是在两个条之间的差距方面）：

差异很小，但两种颜色之间有一个白色间隙。我如何实现这一目标？

谢谢！

标签： reactjsrecharts

Answer 1

我能够通过添加以下内容来实现此
style={{ stroke: '#fff', strokeWidth: 2 }}效果<BarChart>：

<BarChart
  layout="vertical"
  data={barChartData}
  height={300}
  barSize={24}
  barCategoryGap={16}
  style={{ stroke: '#fff', strokeWidth: 2 }}
>

如果您要添加空<Bar />数据来实现这一点，一旦您开始在图表上使用工具提示，您可能会遇到一些奇怪的情况。