A y-axis for a ChartRow, rendered as DOM chrome (not canvas) so the
text is crisp, themeable, and accessible. Registers its id / side / width /
domain with the row, which reserves the gutter (shrinking plotWidth) and
computes this axis's scale from the charts linked to it; the gutter then draws
tick marks + labels from that scale. Charts attach via <LineChart axis="id">
(default: the first axis).
Props
Identifier a chart links to via its axis prop (and the first declared is
the row's default).
boundaryLabelsbooleanRender the tick labels at the domain extremes (the top & bottom ticks)?
Default true. false drops just those two numbers — the gridlines
stay — for when the min/max labels crowd a stacked row's edges and you'd
rather omit them than keep them. (Extreme labels are otherwise clamped to
stay inside the row, never overflowing the edge.)
colorstringThis axis instance's colour — tick labels and the axis title take it,
overriding the theme's axis.label / axis.title.color. The multi-axis
convention of colouring each y axis to match its series (color
matching the layer's) — busy, but standard. Omit for the theme's axis
colours. Presentation-only: it never re-registers the axis.
formatAxisFormatAxisFormattype@pond-ts/chartsstring | (value: number) => stringHow to format an axis's values — a d3 [format specifier]
(https://github.com/d3/d3-format#locale_format) string, or a custom
(value) => string function. Omit for the scale's d3 default.
Value formatting for the tick labels (and the cursor readout, which matches):
a d3 format specifier string (e.g. '.0%', ',.2f') or a (value) => string
function. Omit for the scale's d3 default — which is calibrated to the tick
step, so a between-ticks readout rounds to tick precision; pass a specifier
(e.g. ',.2f') when you want finer readout precision. See AxisFormat.
Live charts: a string specifier is value-compared, so an inline
format='.0%' is safe every render. An inline format={(v) => …} function
is a fresh reference each render — the one axis prop a structural guard can't
value-compare — so on a frequently re-rendering (e.g. scrub-driven) chart,
hoist it or wrap it in useCallback, or it re-registers the axis each frame.
labelstringDisplay label / unit (e.g. bpm); defaults to id.
labelPlacement'rotated' | 'top'How the axis title (label) is drawn:
'rotated'(default) — a thin vertical strip down the outer edge (the standard y-axis convention; fits long labels in a narrow gutter).'top'— horizontal, at the top of the axis, aligned to its side. Reads better for short unit labels; keep it terse and pair it with a domain that has headroom (auto-fit / padded) so it doesn't crowd the top tick.
maxnumberminnumberExplicit domain bounds; omit to auto-fit the charts linked to this axis.
padnumberFractional headroom added to each side of the resolved domain — 0 (the
default) means none. Lifts a tight domain off the plot edges without
hand-computing bounds (e.g. pad={0.05} adds 5% of the span top & bottom).
Applies to an explicit [min, max] or an auto-fit domain.
side'left' | 'right'Which side of the plot the gutter sits on. Author left axes before
<Layers> in JSX and right axes after — the row lays children out in
order. Default left.
ticksreadonly { at: number; label: string }[]Explicit ticks — { at, label } in axis-value units — instead of the
scale's automatic ticks, driving BOTH the labels and the row's gridlines so
the two align. The y-axis counterpart of <XAxis ticks> (same shape): the
lever for a non-uniform axis like pace, where the caller chooses round-pace
positions and their own m:ss labels ({ at: -300, label: '5:00' }). at
values outside [min, max] extrapolate off-plot (the scale does not clamp).
Pass [] to draw none. The array is value-compared on registration, so an
inline ticks={[…]} (or ticks={[]}) with unchanged contents no longer
re-registers the axis — only genuinely changed tick positions do. (An inline
format function still needs hoisting; see format.)
widthnumberGutter width in CSS pixels (default 50).