Number of Ticks shown on Xaxis

Question

I am using Recharts.js to create charts for my website.

I have some custom ticks that I'm using for the X-axis, but only a couple of them are actually shown when the chart is rendered.

I searched the documentation but I can't figure out what controls the number of ticks been shown.

This is my code for the XAxis:

 <XAxis name="city" dataKey="format" tick={<CustomTick/>}/>

And here are the Code for the Custom Tick:

const CustomTick = (props) =>{

return(
    <g transform={`translate(${props.x},${props.y})`}>
        <text textAnchor="end" fontSize={12} transform="rotate(-90)" >{props.payload.value}</text>
    </g>
)}

It produces something like this, where only a couple of ticks are shown: Chart

Does anyone know what value in Recharts.js that controls the number of ticks rendered?

Answer 1

I found that the interval property controlled the number of ticks rendered. Setting it to 0 showed them all: Like this:

<XAxis interval={0} name="city" dataKey="format" tick={<CustomTick />}/>