Skip to main content

<XAxis>

component@pond-ts/chartssource

The shared x axis, a sibling of YAxis for the horizontal axis. A child of ChartContainer, rendered as DOM chrome (crisp text, themeable) under (or over) the rows, aligned to the plot. It reads the container's resolved xScale + xKind — so a time container ticks on wall-clock boundaries and a value container (a ValueSeries row) ticks as numbers, with no axis-type prop here; the kind follows the data.

<TimeAxis> is the time-flavoured preset (<XAxis />).

Props

align'center' | 'right' | 'auto'

Horizontal placement of each tick label relative to its tick.

  • 'center' (default) — every label centred on its tick. Note the first/last labels can then extend past the plot edges (the strip doesn't clip), so a wide first label may reach into the left y-axis gutter; use 'auto' if that crowds.
  • 'auto' — centred, but the first label left-anchors and the last right-anchors so the edge labels stay inside the plot (the old default).
  • 'right' — the label sits to the right of an extended tick that drops from the axis line (label beside the tick, not under it) — useful for dense or wide labels that would collide when centred.
colorstring

This axis instance's colour — tick marks, labels, the plot-facing rule, and the label title all take it, overriding the theme's axis.label / axis.grid / axis.title.color. The lever that distinguishes stacked dual axes (a blue derived-unit strip under a grey primary). Cursor and marker pills keep their own colours. Omit for the theme's axis colours.

dateStyle'flat' | 'stacked'

How a time axis lays out its date context (ignored on value / category axes, and whenever a custom format, transform, or explicit ticks owns the labels).

  • 'flat' (default) — one row: each tick that opens a coarser calendar period is relabelled inline to it (the month at a month turn, the year at a year turn, the date at a day turn under an intraday grain), every other tick a terse label (5, Feb, 14:00). The TradingView look — the row reads … 30 31 Feb 2 3 ….
  • 'stacked' — two rows: a terse top row (the grain's bare unit — 14:00, 12, Feb) over a segmented band row of the next-coarser period (day bands under intraday ticks, month bands under day ticks, year bands under month/quarter ticks). Each band is a left-aligned label + a divider at its turn, zebra-shaded by the band's calendar parity; the top-row tick on each turn is emphasized and joins its divider as one boundary line.
formatAxisFormatAxisFormattype@pond-ts/chartsstring | (value: number) => string

How 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.

Tick / cursor value formatting — a d3 format/time specifier string or a (value) => string. Omitted ⇒ the container's shared formatter (so the axis and the cursor readout agree), which is the d3 multi-scale time format for a time axis or the number default for a value axis. The specifier is resolved against the axis's kind (time vs value).

heightnumber

Strip height in px. Defaults to fit the ticks (+ the label line if any).

labelstring

A label drawn centred below (or above) the ticks — e.g. Distance (m).

side'top' | 'bottom'

Which edge the axis sits on. Default 'bottom'. Declaration order in the <ChartContainer> places it; side orients the ticks + label.

ticksreadonly { at: number; label: string }[]

Explicit ticks — { at, label } in axis-value units — instead of the scale's automatic ticks. The value-axis lever for e.g. lap markers placed at their cumulative-distance positions ({ at: lap.endMeters, label: 'Lap 3' }).

transformAxisTransformAxisTransforminterface@pond-ts/charts{ from: unknown; to: unknown }

A derived-unit transform: to/from are monotonic inverses (either direction — a decreasing transform is fine); they may be nonlinear.

Relabel this axis into a derived unit on the same scale — a second tick layout, not a second scale (the pixel mapping never changes). E.g. a BS-delta strip under a std-moneyness chart (transform={{ to: sigmaToDelta, from: deltaToSigma }}) or a moneyness axis over a strike chart (transform={{ to: (k) => k / spot, from: (m) => m * spot }}). to/from are monotonic inverses (either direction); they may be nonlinear — ticks are nice derived-unit values at mixed 1-2-5 step sizes, admitted wherever they keep pixel room, so a span the transform compresses gets coarser ticks and a span it stretches gets finer ones. format (or the d3 number default) formats the derived values; the cursor pill and marker indicators on this axis read in the derived unit too. Ignored on a category axis; explicit ticks win. Typically used on a second <XAxis> stacked with the primary one — declaration order places the strips; gridlines stay on the container's own (primary) ticks.