[FIXED] How to change the height in between horizontal lines in recharts?

Issue

I have this graph and need to change the height in between the horizontal lines.

LIVE DEMO

<CartesianGrid vertical={false} />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Line
    type="monotone"
    dataKey="pv"
    stroke="#8884d8"
  />

Solution

If i understand correctly what you want, one way to do it is setting the tickCount for YAxis:

<YAxis tickCount={10} />

You can also combine it with domain and interval:

<YAxis
   tickCount={6}
   domain={["auto", "dataMax + 500"]}
   interval="preserveStart"
/>

To better understand these properties:

tickCount: (Number)

The count of axis ticks. Not used if 'type' is 'category'.
DEFAULT value: 5

domain: (Array - optional)

Specify the domain of axis when the axis is a number axis. The length of domain should be 2, and we will validate the values in domain. And each element in the array can be a number, 'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20', 'dataMax + 100', or a function that accepts a single argument and returns a number. If any element of domain is set to be 'auto', comprehensible scale ticks will be calculated, and the final domain of axis is generated by the ticks.
DEFAULT: [0, 'auto']

interval: ("preserveStart" | "preserveEnd" | "preserveStartEnd" | Number)

If set 0, all the ticks will be shown. If set preserveStart", "preserveEnd" or "preserveStartEnd", the ticks which is to be shown or hidden will be calculated automatically.
DEFAULT: 'preserveEnd'

To see more about it, you can check recharts API docs.

Answered By - Luis Paulo Pinto

Answer Checked By - Cary Denson (PHPFixing Admin)