Recharts - how do I set Y-Axis labels myself?

user_583271 0
Viewed 2670

I've created a chart in Recharts. I have a series of dates, each of which has an associated value in the range 0-10 (whole numbers only).

I plot it in a LineChart like this:

<LineChart data={mydata}>
  <XAxis dataKey="date" interval={"preserveStartEnd"}  height={60} tick={<CustomizedXAxisTick />} />
  <YAxis domain={[0,10]} interval={"preserveStartEnd"} />
  <Line type="monotone" dataKey="mykey" strokeWidth={2}/>
</LineChart>

The x-axis looks fine, but on the y-axis the tick marks shown are 0, 3, 6 and 10. I'd rather show 0, 2, 4, 6, 8, 10, but I can't figure out how to change it. I tried changing the value of 'Interval', but I couldn't figure out what the numbers in there do.

recharts
1 Answers

To force specific tick values on your Y-Axis, you need two props:

  • tickCount that represents the number of ticks to show on your Axis (by default it's set to 5)
  • tick to specifically give to the Y-Axis the ticks you want to see.

As a result, your Y-Axis should look like this:

<YAxis domain={[0,10]} tickCount={6} tick={[0, 2, 4, 6, 8, 10]} />

The interval props gives you the opportunity to 'skip' ticks, so if set to 0, all intervals should show. On 1, half would show, etc.

user_73214620
Related