<YAxisIndicator>

component@pond-ts/chartssource

A value pill pinned to a y-axis edge — the ChartIQ / Yahoo-Finance live price tag. Positions at yScale(value) on the linked axis and renders a chip (the solid axisPillStyle pill) at the plot's side edge, optionally with a dashed guide line across the plot.

Render it as a child of <Layers> (alongside the chart layers), so it shares the plot's coordinate space:

<Layers>
  <LineChart series={price} axis="usd" />
  <YAxisIndicator source={liveLast} axis="usd" color="#4af" format=",.2f" line />
</Layers>

The value is decoupled from the series' last point — feed it whatever the live feed reports. For high-frequency updates pass a LiveValue (source); .set() repaints only the pill.

Props

axisstring

Which <YAxis> (by id) to position against; omit for the row's default axis.

colorstring

Pill hue — the colour of the series / value it tracks. Defaults to the axis label colour (theme.axis.label).

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.

Value formatting: a d3 format specifier (e.g. ',.2f', '.1%') or a (value) => string. Omit to use the linked axis's own formatter, so the pill reads exactly like a tick. Pass a specifier for finer precision than the tick-calibrated default (a live price usually wants ',.2f', not the coarser tick rounding). See AxisFormat.

An indicator always shows the axis value — there is no label override. A name/annotation belongs on a <Baseline label>'s near-line chip, not on the axis pill (an axis pill reads like a tick).

lineboolean

Draw a thin dashed guide line from the pill across the plot (the ChartIQ "price line"). Default false.

pointerboolean

Add a small triangle on the pill's plot-facing edge, pointing into the plot at the value (a callout tab). Default false.

side'left' | 'right'

Which edge the pill hugs. Default right — the conventional side for a live value tag. (Independent of the linked axis's side; set it to match.)

sourceLiveValueLiveValueinterface@pond-ts/charts{ getSnapshot: unknown; set: unknown; subscribe: unknown }

A live scalar an axis indicator subscribes to, pushed imperatively from outside React — a WebSocket onmessage, a requestAnimationFrame loop, a tick handler. Backed by useSyncExternalStore on the consuming indicator: calling LiveValue.set re-renders only the indicators subscribed to this value — never the chart tree, never a canvas repaint. Th…

A LiveValue to subscribe to — the high-frequency path. .set(v) moves and relabels the pill without re-rendering the chart. Takes precedence over value if both are given.

valuenumber

A static value to pin the pill at. Pass this or source. Updating value re-renders with its parent — fine for an occasional change; for a high-frequency tick use source so only the pill repaints.