@pond-ts/charts API Reference
    Preparing search index...

    Interface XAxisProps

    interface XAxisProps {
        align?: "center" | "right" | "auto";
        color?: string;
        format?: AxisFormat;
        height?: number;
        label?: string;
        side?: "top" | "bottom";
        ticks?: readonly { at: number; label: string }[];
        transform?: AxisTransform;
    }
    Index

    Properties

    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.
    color?: string

    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.

    format?: AxisFormat

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

    height?: number

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

    label?: string

    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.

    ticks?: readonly { 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' }).

    transform?: AxisTransform

    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.