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.

closestring

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.

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.

highstring

Session-high column. Omitted ⇒ 'high'.

lowstring

Session-low column. Omitted ⇒ 'low'.

openstring

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.