<ChartRow>

component@pond-ts/chartssource

A horizontal band sharing the container's time axis. ChartRow owns the horizontal layout (axes left/right around a <Layers> plot area) and coordinates the row's two registries — axes (<YAxis>) and draw layers (<LineChart>, registered through <Layers>). From the layers it derives a y-scale per axis (each axis auto-fits the layers linked to it, or uses its explicit [min, max]), and provides them via context.

The x geometry (plot width, time scale) is shared and lives on the ChartContainer: the row reports its per-slot gutter widths so the container can reserve each slot's max, then sizes each axis to its slot and pads the outer slots it lacks, so its plot left-aligns with every other row under the one time axis.

Children lay out left-to-right in author order, so <YAxis side="left"/> goes before <Layers/> and <YAxis side="right"/> after.

Props

childrenReactNode

cursorCursorModeCursorModetype@pond-ts/charts'none' | 'line' | 'point' | 'inline' | 'flag' | 'crosshair' | 'region'

The in-chart cursor presentation for a row (the synced vertical line is shared across rows). Exclusive modes — pick one:

Cursor presentation for this row, overriding the container's default (ChartContainerProps.cursor). Omit to inherit. See CursorMode.

flexnumber

Share of the container's remaining height ([PND-HEIGHT]) — the CSS-flex sizing mode, and what an omitted height defaults to (1).

The remainder is what CSS flex layout says it is: the container's height minus its axis strip, minus every fixed-height row, minus any non-row children you placed between rows (a draggable splitter), minus rowGaps. That is deliberate — the row's box is flex: <n> 1 0, so the browser does the subtraction and there is no strip-height constant for a caller to know, guess, or drift on (the reporting consumer had 20 and 24 in one codebase for a strip that is actually 22 — when it is not showing a calendar band row or marker pills, which change it). The row then reads back the height the layout gave it and builds its y-scales from that.

Mixing modes is the point, not an edge case: a price row over a volume row is <ChartRow flex={3}> over <ChartRow flex={1}>; the splitter shape is one flex row that absorbs slack over one fixed row the drag resizes.

Needs a container that manages height — <ChartContainer height={number | 'auto'}>. Inside a container with no height, a flex row's box has nothing to flex into, collapses to zero, and stays gated out; dev builds warn.

A flex row's first useful paint waits for its first measurement — by timing, not a gate: the first render does execute children at height 0 (a 0-height canvas draws nothing), and the layout effect's synchronous setState delivers the real height before the browser paints. Like the container's width="auto", it keeps its last non-zero height while hidden, so a display: none tab switch does not discard its scales.

heightnumber

Row height in CSS pixels — the fixed sizing mode. Omit it (or pass flex) to let the row share the container's remaining height instead; a bare <ChartRow> means flex={1}.