title: Recharts is inconstantly displaying x-axis ticks, is it possible to to make consistent?
body: <p>We've started using recharts as a replacement for a less developed charting library and have run into an issue with axis ticks. Essentially we need to be able to have an arbitrary number of data points on the x Axis, and want to show as many x-axis ticks as possible while not overlapping.</p>
  <p>Now Recharts is able to automatically hide and show any number of ticks that will fit on the axis without overlapping. The issue is is that it does it unevenly, and I can't seem to find out a way to make it even. Below is an example of what is happening.</p>
  <p><a href="https://i.stack.imgur.com/cS3n4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cS3n4.png" alt="Recharts bar chart issue" /></a></p>
  <p>Recharts has decided that Feb 2022 does not fit, and has removed it, but this has left the axis uneven, ideally we would want it to remove every other tick so that there is even spacing.</p>
  <p>Is this at all possible without somehow manually measuring and defining ticks?</p>
  <p>Here is the x-axis configuration</p>
  <pre><code>&lt;XAxis
    dataKey=&quot;category&quot;
    axisLine={false}
    tickLine={false}
    padding={{ left: 64, right: 64 }}
    fontSize=&quot;0.75rem&quot;
    style={labelStyles}
    domain={
      data.length
        ? [data[0].category, data[data.length - 1].category]
        : undefined
    }
    scale=&quot;time&quot;
    type=&quot;number&quot;
    tickFormatter={(value: number) =&gt;
      DateTime.fromMillis(value * 1000).toFormat(
        dateFormat || DEFAULT_DATE_FORMAT
      )
    }
  /&gt;
  </code></pre>