Charts

CandlestickChartNew in 0.8.0

Financial price chart with candles, OHLC ticks or a close line, volume bars, SMA/EMA overlays, a crosshair readout and pan/zoom.

CandlestickChartsmaema

Preview

04-30O 143.09H 144.46L 140.43C 142.11Vol 5.0k

Showing candles 61–120 of 120. Drag to pan, scroll to zoom, or focus the chart and use ←/→ and +/−.

Usage

tsx

import { CandlestickChart } from "@vesture/react";

<CandlestickChart
  width={760}
  height={380}
  data={candles}
  defaultVisibleRange={[30, 90]}
  indicators={[{ kind: "sma", period: 10 }, { kind: "ema", period: 20 }]}
/>

Behavior

Drag to pan, scroll the wheel to zoom around the pointer. With the chart focused, ←/→ pan and +/− zoom.
The visible window is a [start, end) index range — control it with visibleRange / onVisibleRangeChange to build your own range selector.
sma(values, period) and ema(values, period) are exported if you want to compute indicators yourself.

Props

Prop	Type	Default	Description
data	{ time; open; high; low; close; volume? }[]	—	Required, oldest first.
width / height	number	—	Required, in px.
type	"candle" \| "ohlc" \| "line"	"candle"	Price rendering.
upColor / downColor	string	—	Override success / danger tokens.
hollowUp	boolean	false	Outline-only up candles.
showVolume / volumeRatio	boolean / number	true / 0.22	Volume pane.
indicators	{ kind: 'sma' \| 'ema'; period; color? }[]	—	Overlay lines.
showCrosshair / showReadout	boolean	true	Hover crosshair and OHLC row.
visibleRange / defaultVisibleRange / onVisibleRangeChange	[number, number]	—	Controlled or uncontrolled window.
minVisible	number	10	Zoom floor in candles.
formatPrice / formatVolume	(v: number) => string	—	Axis and readout formatting.