如何自定义 Recharts CartesianGrid 中的水平线位置？

Question

我最近在 ReactJS 上试用 Recharts，我在自定义 CartesianGrid 水平线的位置时遇到问题。

这是我最初得到的：Before positioning

这是我想要实现的：After positioning

我想让条形图位于网格之间。所以我在这里所做的是使用 css.

更改样式

.recharts-cartesian-grid-horizontal line:nth-last-child(n+3) {
  transform: translate(0, 20px);
}

但这样做的问题是当图表大小改变时，线条对齐可能会关闭。我想知道如何以更好的方式做到这一点？

Answer 1

经过这么多天，我发现这可以通过 CartesianGrid 上的 horizontalPoints prop 来完成。我可以通过向道具提供一组点来重新调整水平网格线。