CandlestickChart
Charts

CandlestickChart

OHLC candlestick chart with an optional volume strip and moving-average overlays.

Component behavior

CandlestickChart displays open, high, low, and close values for each period. Optional volume bars and moving averages share the period axis.

Use cases
  • Per-period open, high, low, and close values.
  • Comparisons of price range and closing value within each period.
  • Price data with corresponding trading volume.
Alternatives

LineChart: each period has one value.

AreaChart: the measure is accumulated volume rather than a changing price or rate.

Histogram: the task requires a return distribution rather than a time series.

Sparkline: the chart must fit in a table cell.

Props

Each Candle is one period: label for the axis, open, high, low, close in your own price units, and an optional volume. Candles are laid out by array index at equal width, so the array must already be in chronological order. The price domain spans the lowest low to the highest high across the whole set, padded 6% at each end.

CandlestickChartProps props
PropTypeDefaultDescription
dataCandle[]—OHLC periods in chronological order, with optional volume. Each entry renders one equal-width candle.
heightnumber200Price panel height in pixels. The volume strip, x-axis, and MA legend add to the total.
volumeHeightnumber40Height of the volume strip. 0 hides it; it is also hidden when no candle carries a volume, leaving no empty gutter.
upColorstring"var(--m-color-ok)"Close ≥ open. Up candles get a filled body; a flat candle (close === open) counts as up.
downColorstring"var(--m-color-err)"Close < open. Down candles get a hollow body with a 1px border, so direction survives even without color.
formatPrice(value: number) => string—Formats y-axis price labels. Defaults to two decimal places.
ticksnumber5Y-axis tick count, including both ends. Gridlines are drawn for all but the topmost.
movingAverages{ period: number; color: string }[]—Simple moving averages over close prices. Each line starts at index period − 1; earlier points are omitted. Passing this also renders an MA-labelled legend.
renderTooltip(candle: Candle, index: number) => ReactNode—Tooltip on hover. Receives the candle object itself, so no lookup by index is needed.
xLabelEverynumber—Show every Nth x label (1 = all). Defaults to roughly six labels total; skipped slots stay in place.

Examples

Price and volume

The wick spans low to high. The body spans open to close. Up candles are filled; down candles are hollow. Equal open and close values render a 1px body. Volume bars use the candle color and scale against the largest volume.

CandlestickChart

Moving averages

movingAverages specifies window lengths and colors. Each line uses the mean closing value over a full window. An MA10 over twelve candles produces three points. The legend labels lines by window length.

CandlestickChart moving averages

Tooltip and price formatting

Hovering a period highlights its candle and volume bar. renderTooltip receives the candle. The tooltip changes sides past the series midpoint. formatPrice formats y-axis labels only.

CandlestickChart tooltip

Price only

Omit volume from the data, or set volumeHeight={0}, and the strip is not rendered. With a smaller height, fewer ticks, and a coarser xLabelEvery, the same component fits a dashboard tile.

CandlestickChart price only
ImportTSX
import { CandlestickChart } from "@solarius/onset";
import type { Candle } from "@solarius/onset";

<CandlestickChart
  data={[
    { label: "Mon", open: 100, high: 108, low: 96, close: 104, volume: 820 },
    { label: "Tue", open: 104, high: 112, low: 102, close: 110, volume: 950 },
  ]}
  movingAverages={[{ period: 5, color: "var(--m-color-warn)" }]}
  formatPrice={(v) => `$${v.toFixed(2)}`}
/>;