Axis Domain and Ticks

The domain defines the min/max range of an axis. Ticks are the labeled markers along the axis.

The examples below use solar system data — planet masses span from 10²² kg (Pluto) to 10³⁰ kg (Sun), making domain configuration essential.

Default domain

By default, axes calculate their domain from the data. When values span many orders of magnitude, the result is unsatisfactory — smaller planets are invisible because the Sun dominates:

YAxis as category type

Switching YAxis to type="category" shows each unique mass value as a discrete tick:

Custom domain with allow-data-overflow

Set a fixed domain to zoom into a range. Add allow-data-overflow so the axis keeps that domain; without it, the axis grows to include all data. Data outside the domain is clipped:

Logarithmic scale

For data spanning many orders of magnitude, a logarithmic scale makes all values proportionally visible:

Domain options

<!-- Auto domain from data (default) -->
<YAxis />

<!-- Fixed domain -->
<YAxis :domain="[0, 100]" />

<!-- Data-driven bounds -->
<YAxis :domain="['dataMin', 'dataMax']" />

<!-- Auto with padding -->
<YAxis :domain="['auto', 'auto']" />

<!-- Custom function -->
<YAxis :domain="[(dataMin) => dataMin * 0.9, (dataMax) => dataMax * 1.1]" />

Tick formatting

Use tick-formatter to display values in human-readable units. Here, mass in kg is converted to yottagrams (1 Yg = 10²⁴ kg):

Tick count

Use tick-count to suggest how many ticks to display. The actual number may differ as the scale finds "nice" values:

Custom ticks

If you don't like the automatic tick placement, provide your own tick values directly via the ticks prop. This gives you full control over tick positions and labels:

<XAxis type="number" data-key="x" :ticks="[0, 110, 220, 330, 440, 550]" />

<YAxis :ticks="[0, 40, 80, 120, 160, 200]" />

Tick interval

The interval prop controls which ticks are shown on categorical axes. With many categories, labels may overlap — use interval to manage this:

<!-- Show all ticks -->
<XAxis :interval="0" />

<!-- Show every other tick -->
<XAxis :interval="1" />

<!-- Preserve the first tick -->
<XAxis interval="preserveStart" />

<!-- Preserve the last tick (default) -->
<XAxis interval="preserveEnd" />

<!-- Preserve both start and end -->
<XAxis interval="preserveStartEnd" />

Minimum tick gap

Set min-tick-gap to specify the minimum pixel spacing between ticks. Ticks that are too close together will be removed:

<XAxis :min-tick-gap="30" />

Hide ticks

To hide tick marks, tick labels, or the axis line individually:

<!-- Hide tick marks only -->
<XAxis :tick-line="false" />

<!-- Hide tick labels -->
<XAxis :tick="false" />

<!-- Hide the axis line -->
<XAxis :axis-line="false" />

<!-- Hide everything (invisible axis that still affects layout) -->
<XAxis :tick="false" :tick-line="false" :axis-line="false" />