Candlestick Chart

OHLC candles. Up candles are hollow (outline), down candles filled, so direction reads without color; success/danger tints reinforce it. OHLC tooltips on hover, or focus + arrow keys.

Import

import { CandlestickChart } from '@marbleui/ui'

Props

<CandlestickChart>

Prop	Type	Default
data *required	`Candle[]`	`—`
summary *required	`string`	`—`
className	`string`	`—`
height	`number`	`280`
title	`string`	`—`
valueFormat	`(n: number) => string`	`(n: number) => n.toFixed(2)`

Usage notes

Open, high, low and close per period for a traded price. For a single value over time use LineChart.

const candles: Candle[] = prices.map((p) => ({ date: p.day, open: p.open, high: p.high, low: p.low, close: p.close }))
<CandlestickChart
  title="ACME · daily"
  summary="ACME rose from $182 to $196 in September; the largest daily drop was on Sep 16."
  data={candles}
  valueFormat={(n) => `$${n.toFixed(2)}`}
/>

Up periods (close ≥ open) are hollow with a success outline and down periods are filled in danger, so direction reads without colour; the legend says so.
date is the axis label and must be unique per candle; at most eight are printed along the axis.
The y axis spans the lowest low to the highest high rather than starting at zero. There is no volume pane.
Each candle has a full-height hover target for its OHLC tooltip. Tab focuses the plot and arrow keys step through candles; the tooltip follows and a live region reads the OHLC values.

Example source · show

import { CandlestickChart, type Candle } from './candlestick-chart'

let p = 182
const data: Candle[] = Array.from({ length: 30 }, (_, i) => { const o = p, c = +(o + Math.sin(i * 1.7) * 3 + (i % 5 === 0 ? -4 : 1.2)).toFixed(2); const h = Math.max(o, c) + 1 + ((i * 7) % 3), l = Math.min(o, c) - 1 - ((i * 5) % 3); p = c; return { date: `Sep ${i + 1}`, open: o, high: +h.toFixed(2), low: +l.toFixed(2), close: c } })
export const styles = { Default: () => <CandlestickChart className="w-[38rem] max-w-full" title="ACME · daily" summary={`ACME moved from ${data[0]!.open} to ${data.at(-1)!.close} over September.`} data={data} /> }

Source: packages/ui/src/candlestick-chart/candlestick-chart.tsx

Catalog