Skip to main content

Candlestick

First-class OHLC candles. Pairs with the trading-time axis for a gap-free session view.

src/examples/gallery-financial.tsx
import {
  Candlestick,
  ChartContainer,
  ChartRow,
  Layers,
  YAxis,
} from '@pond-ts/charts';
import { useSiteChartTheme } from '@site/src/theme/useSiteChartTheme';
import { dailyCandles, dailyCandlesRange } from './lib/gallery-fixtures';

/** Financial terminal: daily OHLC candles with the crosshair cursor and the
 *  axis-pill OHLC readout — first-class support, not a bar-chart hack. */
export default function GalleryFinancial({ width }: { width: number }) {
  const theme = useSiteChartTheme();
  const series = dailyCandles();

  return (
    <ChartContainer
      range={dailyCandlesRange()}
      width={width}
      theme={theme}
      cursor="crosshair"
    >
      <ChartRow height={220}>
        <YAxis id="price" side="right" format="$,.0f" width={50} />
        <Layers>
          <Candlestick series={series} as="ACME" showOHLC />
        </Layers>
      </ChartRow>
    </ChartContainer>
  );
}

Data contract​

Takes a TimeSeries (only — no ValueSeries) with four OHLC columns, default names open / high / low / close (all overridable). Point-keyed raw daily bars feed straight in; an interval key is an aggregate rollup (weekly / monthly). A candle with any of the four prices missing draws nothing. Adapter: ohlcFromTimeSeries(series, { open, high, low, close }).

Props​

PropTypeDefaultPurpose
seriesTimeSeries— (req)OHLCV source (TimeSeries only).
open / high / low / closestringthose namesThe four price columns (override if named differently).
asstring'default'Style role → theme.candle[as]; also the close-pill label.
axisstringrow defaultWhich <YAxis id> to scale against.
variant'candle' | 'bar' | 'hollow''candle'Candle presentation (see variants).
colorBy'direction' | 'series''direction'Colour by rising/falling/doji, or one series colour.
showOHLCbooleanfalseFan full O/H/L/C to the readout (4 pills) vs a single close.
gapnumber0Horizontal inset px.

Variants​

  • variant — 'candle' (default: filled body + wick), 'bar' (OHLC tick bar), 'hollow' (rising hollow, falling filled).
  • colorBy — 'direction' (rising / falling / doji off open vs close) or 'series' (one colour, no direction split).
  • showOHLC — a 4-pill quote readout instead of the single close pill.

Interaction & theming​

  • Cursor: participates in the crosshair x-snap — the reticle lands on candles (unlike BoxPlot). The readout is close by default, or four O/H/L/C pills with showOHLC.
  • Selection: not selectable.
  • Theming: the theme.candle slot (CandleStyle with rising / falling / optional neutral body+wick). The shipped default pair is neutral, not market green/red — supply your palette via cssVarTheme.

Cautions​

  • Doji is exact equality — the neutral colour applies only when open === close (under colorBy='direction').
  • Draws only — windowing / aggregation stay upstream; the chart derives the body extents itself (no withColumn precompute).
  • Any of the four prices missing → the candle draws nothing.

See also​