Browse docs

Numeric axes

For data from 101 to 119, an axis spanning 100–120 exposes the variation without forcing a zero baseline. Viz chooses numeric steps from multiples of 1, 2, and 5 across powers of ten.

Switch the example to a constant signal: its automatic domain expands around the recorded value.

Constant recording (100 V)Click chart to seek

Synthetic · 121 samples · 60 secondsSensor voltage · automatic numeric axis

(V)

161412108

00:0000:1500:3000:4501:00(mm:ss)

Identical recorded samples determine the automatic domain. Hover to inspect the original values; click to seek.

Code NumericChartSpec.tsx

Tick and domain helpers

Build a custom axis by choosing its domain, finding ticks, then formatting them:

import {
  niceNumericDomain,
  numericTicks,
  formatNumericTick,
} from "@dreamlake/viz";

const domain = niceNumericDomain(101, 119); // [100, 120]
const ticks = numericTicks(...domain); // [100, 105, 110, 115, 120]
const labels = ticks.map((value) => formatNumericTick(value, 5));

Adjust the bounds and count below. Tick count is a target; readable spacing can produce a different number of ticks.

RecordingExpand automatic domain

Recorded range: 13 → 87
Plot domain: 0 → 100
Tick count: 6 (target: 5)

Code NumericAxisSpec.tsx

Helper	Result
`numericTicks(min, max, count = 5)`	Ascending finite ticks inside the supplied domain.
`niceNumericDomain(min, max, count = 5)`	A domain rounded outward to readable tick boundaries.
`formatNumericTick(value, step)`	A label with enough precision to distinguish ticks, using scientific notation for very small or large values.

Line charts and parallel coordinates use these helpers. An explicit yRange or axis domain keeps your bounds unchanged.

Domains and labels

Position ticks by (value - min) / (max - min), not by their array index. Otherwise ticks inside an explicit domain can appear at the wrong positions.

numericTicks returns one value for a constant domain; niceNumericDomain expands it for display, using [-1, 1] at zero. Invalid or reversed bounds produce no ticks and a fallback domain of [0, 1].

Numeric labels use enough precision to distinguish ticks. In line charts, formatValue can supply units and default axis labels; formatTick overrides axis text. Default tooltip values use two decimals. Time axes have separate clock formatting.