title: How to customize horizontal lines position in Recharts CartesianGrid?
body: <p>I am trying out Recharts on ReactJS recently and I am having problem to customise the position of the horizontal line of <code>CartesianGrid</code>.</p>
  <p>This is what I got at first: <a href="https://i.stack.imgur.com/QxSwK.png" rel="nofollow noreferrer">Before positioning</a></p>
  <p>This is what I would like to achieve: <a href="https://i.stack.imgur.com/eAd0k.png" rel="nofollow noreferrer">After positioning</a></p>
  <p>I would like to make the bars sit between the grids. So what I have done here is to change the styling with css.</p>
  <pre><code>.recharts-cartesian-grid-horizontal line:nth-last-child(n+3) {
    transform: translate(0, 20px);
  }
  </code></pre>
  <p>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?</p>