Scales & Axes
How data maps to positions – auto-inferred, or explicitly configured.
szum infers scale types from your data. Most charts need zero axis configuration.
Auto-inference
| Data values | Inferred scale | Example |
|---|---|---|
| Numbers | linear | 42, 3.14 |
| ISO date strings | utc | "2026-03-15" |
| Other strings | band (categorical) | "Jan", "Organic" |
Axis config
Both x and y accept the same fields:
| Field | Type | Description |
|---|---|---|
type | "linear" | "band" | "utc" | Override the inferred scale type. |
domain | [min, max] or string[] | Force a specific range. |
label | string | Axis label text. |
tickFormat | string | D3 format specifier for tick labels. |
Custom domain
Force the y-axis to start at zero, or set a specific range:
Tick formatting
Use D3 format specifiers to control how tick labels display. Click a format to see it applied:
$,.0f→$1,200UTC dates
ISO date strings are auto-detected. Tick labels format by granularity:
- Daily data →
Mar 15 - Monthly data →
Mar - Yearly data →
2025
Dates are parsed as UTC. Use ISO 8601 format (YYYY-MM-DD or full datetime).
Automatic behaviors
Zero baseline: For linear scales where all values are positive, the domain starts at 0 – bars always grow from the baseline. Override with an explicit domain.
Tick rotation: When x-axis tick labels would overlap, they rotate -90° automatically. Margins expand to fit.
Tick count: Computed from available space – roughly one tick per 50px on x, and one per 2.5× font size on y.