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

问题描述

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

这是我最初得到的：Before positioning

这就是我想要实现的目标：After positioning

我想让酒吧位于网格之间。所以我这里所做的就是用css改变样式。

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

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

解决方法

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