Search code examples
javascriptcssreactjsgraphrecharts

How to change the height in between horizontal lines in recharts?

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

enter image description here

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.