Home/ Cookbook/ Charts/ Candlestick

Candlestick (OHLC)

A wick from low to high, a body from open to close, one per period. The chart traders learned to read in their sleep — and the only chart that packs four values into a single glyph.

Charts · 20 of 20 1 primitive · Chart.Candlestick ~15 min React · @corelithzw/react

Overview

Each candle encodes a period's open, high, low and close. Green when close > open, red when close < open. The wick is the range, the body is the move.

The candlestick is a remarkable bit of information design — four numbers per period, compressed into a glyph that reads at a glance once you know the convention. Body height tells you the magnitude of the move; wick length tells you the volatility around it; colour tells you direction. Stacked at a constant interval (daily, hourly), they reveal trend, indecision, and reversal patterns that line charts smooth away.

Reach for it for price-like data with a meaningful open/high/low/close — trading screens, mining grade by shift, manufacturing yield by run, even per-day temperature. Skip it for any other shape — you'll be teaching the user a new convention with nothing to gain.

The opinion: candlesticks live and die by the y-axis precision. Always include the right-hand price ladder; without it the chart is a sequence of green and red blobs.

The chart

Daily gold price in USD/oz across two trading weeks. Run of green into a doji, then a sharp red day.

Required pieces

PrimitiveChart.Candlestick PrimitiveTooltip

Roadmap: Chart.Candlestick in v0.2 supports tick patterns, volume overlay, and crosshair tooltips. v0.1-alpha users emit the wick line and rect pair manually.

React snippet

Pass data with {date, open, high, low, close}; colour rules ship as defaults.

Chart.Candlestick@corelithzw/react

Customising

With volume bars

A second panel underneath showing volume. The chart standard for any trading-screen embed.

<Chart.Candlestick
  data={candles}
  panels={[
    'price',
    { type: 'volume',
      accessor: 'vol' }
  ]}
/>

Heikin-Ashi smoothing

Smoothed candles that show trend more clearly at the cost of exact OHLC values. Good for screen embeds.

<Chart.Candlestick
  data={candles}
  variant="heikin-ashi"
/>

OHLC bars (no body)

Hollow Western-style bars — open tick left, close tick right, vertical line low-to-high. Lower ink, same data.

<Chart.Candlestick
  data={candles}
  variant="ohlc-bars"
  width={640}
/>

In context

Embedded in a gold-mine clerk's "today's spot" tile — last close prominent, ten-day candle history beneath, a small change badge to the side.

Gold · spot · USD/oz

1,905.20

−1.6% · 10 sess.