Skip to main content

<Candlestick>

component@pond-ts/chartssource

A first-class OHLC candlestick draw layer — the financial sibling of BoxPlot. Reads four price columns (open/high/low/close) of series into an OhlcSeries and draws one candle per key: the open→close body (direction-coloured) and the high–low wick, over the key's slot x-span. Derives the body extents itself (min/max of open/close) — the consumer never runs a withColumn precompute. Registers into the enclosing Layers; renders nothing to the DOM — the row draws it. Gap-aware (a key missing any price draws nothing).

Draws only — windowing stays upstream: raw daily OHLCV is a point-keyed TimeSeries fed straight in, and a weekly / monthly bar is the identical call on an aggregate(Sequence.calendar('week'), …) rollup (interval-keyed). This supersedes BoxPlot shape='solid' for OHLC (which needed a quantile remap, a body precompute, two overlaid layers for green/red, and a column-name tracker).

Cursor. Unlike BoxPlot, a candle participates in the crosshair x-snap (it exposes plain sampleAt, not a consolidated cursorFlag), so the reticle lands on candles. The readout keys on as and shows close by default; pass showOHLC for the full four-pill quote.

<Layers>
  <Candlestick series={daily} as="AAPL" />
</Layers>

Props

seriesTimeSeriesTimeSeriesclasspond-ts

An immutable, schema-typed, ordered collection of events — the batch layer's core primitive. A series is constructed whole from complete data and never mutated: every transform (filter, align, rollup, …) returns a new TimeSeries, so the full analytical surface can sort, scan, or index freely. Example: new TimeSeries({ name, schema, rows }).

<S>required

The source series. Point-keyed (time) raw OHLCV feeds straight in — each candle's slot is derived from neighbour spacing (see ohlcFromTimeSeries), no aggregate pass needed. An interval / timeRange-keyed series (an aggregate rollup — weekly / monthly bars) uses the key's own [begin, end) as the slot. The chart infers the x-kind from the data; there's no axis-type prop.

asstring

The series' semantic identifier — what the data is (e.g. a ticker). The theme maps it to a CandleStyle (theme.candle[as] ?? theme.candle.default). Omitted ⇒ the default candle style. It's also the tracker/readout label for the series (the primary close pill keys on as, not the raw column name).

axisstring

Which <YAxis> (by its id) this candle scales against — the scale, where as picks the style. Omitted ⇒ the row's default axis.

closeNumericColumn<S>

Closing-price column. Omitted ⇒ 'close'.

colorByColorByColorBytype@pond-ts/charts'direction' | 'series'

What drives a candle's colour:

What drives the colour — 'direction' (default; rising / falling / doji off open vs close, the market convention) or 'series' (one colour off the as role, no green/red). See ColorBy.

decimateDecimateOptionDecimateOptiontype@pond-ts/chartsboolean | { threshold?: number }

A line layer's M4-decimation control (<LineChart decimate>). Default true — auto-decimate once the visible slice exceeds 2 × the device-pixel column count. false disables it (always draw every visible point). { threshold } overrides the samples-per-pixel factor k (higher ⇒ decimate later). Only the honest default draw path decimates (see `dra…

M4 viewport decimation (charts decimator wave). Omitted ⇒ true: once the visible candles are denser than ~2 per device pixel, they are drawn as per-pixel-column aggregate candles (open=first, high=max, low=min, close=last) — i.e. re-bucketed to the pixel-column timeframe, the way a trading chart shows fewer, wider candles as you zoom out. It is a faithful OHLC of each column's span (never a distortion), just at a coarser timeframe. Pass false to draw every candle at its own slot (and pre-aggregate upstream if you need a fixed timeframe). Shares LineChart's DecimateOption.

gapnumber

Total horizontal inset between adjacent candles in px (half each side), so they breathe — see barSpanPx. Omitted ⇒ 0 (the body already insets to style.bodyWidth of the slot). A candle narrower than 1px after the inset collapses to a 1px mark, so a thin slot stays visible.

highNumericColumn<S>

Session-high column. Omitted ⇒ 'high'.

idstring

Stable series identity — gates selection + hover, the same id-gated contract <BarChart> / <BoxPlot> / <ScatterChart> carry. With an id, a click inside a candle's slot selects it (selected/onSelect), pointer-over lights it (hovered/onHover), and a <MultiSelector> can sweep a run of candles. Omitted ⇒ display-only. key is the candle's x (its slot begin).

The state cues never touch the candle's colour — see CandleStyle for why a candle is the one mark whose hue cannot carry its state.

legendstring | boolean

This layer's <Legend> row: false ⇒ no row (opt out), a string ⇒ the row's display name. Omitted ⇒ a row named by the layer's readout identity (as ?? the close column). The swatch is the resolved up/down candle pair.

lowNumericColumn<S>

Session-low column. Omitted ⇒ 'low'.

openNumericColumn<S>

Opening-price column. Omitted ⇒ 'open'.

showOHLCboolean

Fan the full O/H/L/C to the tracker readout (four value pills) instead of the default single close pill. Omitted ⇒ false — close is "the price" for a compact legend; the full quote is opt-in for a dense hover readout.

variantCandleVariantCandleVarianttype@pond-ts/charts'candle' | 'bar' | 'hollow'

How an OHLC mark renders (pjm17971's fork 2 — bundled as one component, like BoxShape, not split into a separate <OHLCBar>):

How each mark renders — 'candle' (default; filled body + wick), 'bar' (OHLC tick bar), or 'hollow' (rising hollow / falling filled). See CandleVariant.