How axis ticks work

Recharts supports multiple tick generation strategies for numeric axes through the niceTicks prop. This guide explains how the strategy, tickCount, and domain interact.

The available niceTicks modes are:

  • 'none': Recharts does not apply tick-rounding. Domain is decided by data and domain settings. This option may produce non-round labels and uneven spacing.
  • 'auto' (default): Recharts decides the algorithm based on domain settings.
  • 'adaptive': Always uses the space-efficient algorithm, which tends to use chart space tightly. It produces round-ish labels like 0/20/40/60/80 or 0/25/50/75, but may skip some round numbers.
  • 'snap125': Always snaps ticks to values from the set {(1, 2, 2.5, 5)} × 10ⁿ, which produces very human-friendly labels like 0/20/40/60/80 or 0/50/100 but may leave extra space at the edges of the chart.

Use the controls below to compare strategies and see how tickCount and domain settings influence the final ticks.

5

If you don't like any of these options, you can also provide your own tick values directly via the ticks prop. This gives you full control over tick positions and labels.