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 allowDataOverflow

Set a fixed domain to zoom into a specific range. Use allow-data-overflow so data outside the range still renders (overflowing the chart area):

Logarithmic scale

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

Tick formatting

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

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]" />