how do I space the values by fixed amounts on the y axis in recharts

user_4699448 0
Viewed 1181

I'm trying to display a graph in recharts that will have a y axis that goes up in 5000s. I would like it to have ticks of 0, 5000, 10000, ... up to about 5000 more than the maximum value. Ideally, the cartesian grid should have horizontal lines at those tick values.

I've done lots of googling, looking at github issues and SO questions. I've tried a variety of interval, tickSize, tick and others.

<LineChart
  width={400} height={400}
  data={this.state.costs}
>
  <Line type="monotone" dataKey="self" stroke="#8884d8" />
  <CartesianGrid
    stroke="#ccc"
    vertical={false}
  />
  <XAxis dataKey="age" interval={0}/>
  <YAxis
    dataKey="self"
  />
</LineChart>
recharts reactjs javascript
1 Answers

I believe you can set the yAxis ticks property to whatever you like

So,

<YAxis
    dataKey="self" ticks={[0, 5000, 10000, 15000]}
  />

If you want it to be dynamically calculated just write some code to generate the array.

user_3916150
Related