CODEWITHSUNDEEP
reactjsrecharts
HaoSiong Ng
HaoSiong Ng

Reputation: 97

How to customize horizontal lines position in Recharts CartesianGrid?

I am trying out Recharts on ReactJS recently and I am having problem to customise the position of the horizontal line of CartesianGrid.

This is what I got at first: Before positioning

This is what I would like to achieve: After positioning

I would like to make the bars sit between the grids. So what I have done here is to change the styling with css.

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

But the problem with this is that the lines alignments might be off when the size of the charts changed. I am wondering how can I do this in a better way?

Upvotes: 2

Views: 5051

Answers (1)

HaoSiong Ng
HaoSiong Ng

Reputation: 97

After so many days, I found that this could be done with horizontalPoints prop on CartesianGrid. I can readjust the horizontal grid line by providing an array of points to the prop.

Upvotes: 5

Related Questions