Candlestick Chart

ACME · 1m

187.15-0.88 (-0.47%)O 188.04H 188.88L 186.91C 187.15Vol 1.9K10:17

ACME one-minute candles data
Time	Open	High	Low	Close	Volume
09:30	184.20	184.86	183.53	184.27	2.3K
09:31	184.27	185.68	184.18	185.09	2.8K
09:32	185.09	185.87	184.56	185.37	3.1K
09:33	185.37	186.12	184.48	185.24	1.3K
09:34	185.24	185.55	184.13	184.57	2.3K
09:35	184.57	184.94	183.91	184.80	2.4K
09:36	184.80	185.73	183.77	184.66	2.8K
09:37	184.66	185.35	184.02	184.30	1.3K
09:38	184.30	185.96	183.97	184.88	1.7K
09:39	184.88	185.85	184.26	185.46	2.7K
09:40	185.46	186.43	184.52	186.28	3.5K
09:41	186.28	186.30	185.98	186.06	3K
09:42	186.06	186.69	185.76	186.10	2K
09:43	186.10	186.77	185.38	186.67	1.4K
09:44	186.67	187.38	185.49	186.59	1.9K
09:45	186.59	186.98	186.50	186.56	2.6K
09:46	186.56	187.41	186.09	186.42	2.3K
09:47	186.42	187.37	185.95	186.13	1.4K
09:48	186.13	187.16	185.99	186.46	2K
09:49	186.46	187.51	185.28	186.23	2.5K
09:50	186.23	187.26	185.42	186.08	2K
09:51	186.08	186.65	185.69	185.69	3.3K
09:52	185.69	186.15	185.16	185.30	1.3K
09:53	185.30	186.49	184.73	185.89	1.6K
09:54	185.89	186.76	184.90	186.06	3.3K
09:55	186.06	187.00	185.42	186.33	2.2K
09:56	186.33	187.06	184.74	185.47	4K
09:57	185.47	186.13	185.31	185.98	2.8K
09:58	185.98	187.46	184.95	187.08	2.7K
09:59	187.08	188.44	187.00	187.71	2.1K
10:00	187.71	188.68	187.00	188.12	1.7K
10:01	188.12	189.02	188.02	188.66	2.6K
10:02	188.66	188.86	187.51	188.44	3.2K
10:03	188.44	189.05	187.95	189.05	3.4K
10:04	189.05	190.04	188.33	189.25	984
10:05	189.25	189.84	189.06	189.29	2.8K
10:06	189.29	189.38	187.21	188.34	3.1K
10:07	188.34	189.79	187.30	188.85	3.6K
10:08	188.85	189.04	187.20	187.87	2.6K
10:09	187.87	188.47	187.68	187.73	1.1K
10:10	187.73	188.04	187.22	187.69	2.6K
10:11	187.69	188.07	186.88	187.54	1.8K
10:12	187.54	188.99	187.04	188.66	2.4K
10:13	188.66	189.48	188.02	189.12	2.8K
10:14	189.12	189.27	187.85	188.04	3.7K
10:15	188.04	188.96	187.04	187.26	3K
10:16	187.26	188.87	186.35	188.04	1.7K
10:17	188.04	188.88	186.91	187.15	1.9K

Installation

pnpm dlx shadcn@latest add @paneui/candlestick-chart

Usage

import { CandlestickChart, generateCandles } from "@/components/ui/candlestick-chart"

<CandlestickChart candles={generateCandles(40)} label="ACME one-minute candles" />

Examples

Daily Candles

Without Volume

Compact

Last Price

Volume Ratio

Keyboard

The chart is focusable. ArrowLeft / ArrowRight step through candles, Home / End jump to the first or last, and Escape clears the crosshair. The readout follows the inspected candle.

Accessibility

The readout is a polite live region, and a visually hidden table lists every candle's time, OHLC and volume.

API Reference

CandlestickChart

OHLC candlestick chart with volume pane, crosshair and last-price line. Past 60 candles the bars tighten automatically. Also accepts every prop of div.

candles*: readonly Candle[]; Candles in time order.
label= "Candlestick chart": string; Accessible name for the chart and data table.
height= 320: number; Plot height in px, including the time row.
lastPrice: number; Price on the last-price line; defaults to the last close.
formatPrice= 2-decimal en-US: (price: number) => string; Formats prices on the axis, readout and table.
formatVolume= formatCompact: (volume: number) => string; Formats volume in the readout and table.
formatTime= HH:mm (UTC): (time: number) => string; Formats time on the axis, readout and table.
showVolume= true: boolean; Show the volume pane.
showReadout= true: boolean; Show the OHLC readout above the chart.
volumeRatio= 0.2: number; Share of the plot height used by the volume pane.

Prop	Type	Default	Description
candles*	readonly Candle[]	—	Candles in time order.
label	string	"Candlestick chart"	Accessible name for the chart and data table.
height	number	320	Plot height in px, including the time row.
lastPrice	number	—	Price on the last-price line; defaults to the last close.
formatPrice	(price: number) => string	2-decimal en-US	Formats prices on the axis, readout and table.
formatVolume	(volume: number) => string	formatCompact	Formats volume in the readout and table.
formatTime	(time: number) => string	HH:mm (UTC)	Formats `time` on the axis, readout and table.
showVolume	boolean	true	Show the volume pane.
showReadout	boolean	true	Show the OHLC readout above the chart.
volumeRatio	number	0.2	Share of the plot height used by the volume pane.

Candle

One candle.

time*: number; Unique, ordered key, such as a timestamp (ms) or any increasing number.
open*: number; Opening price.
high*: number; Highest price.
low*: number; Lowest price.
close*: number; Closing price.
volume: number; Traded volume.

Prop	Type	Default	Description
time*	number	—	Unique, ordered key, such as a timestamp (ms) or any increasing number.
open*	number	—	Opening price.
high*	number	—	Highest price.
low*	number	—	Lowest price.
close*	number	—	Closing price.
volume	number	—	Traded volume.

generateCandles

generateCandles(count, options?) makes deterministic random-walk candles for demos and tests.

count*: number; Number of candles.
seed= 7: number; Random seed.
start= 100: number; First open price.
startTime= Date.UTC(2026, 0, 5, 9, 30): number; Time of the first candle (ms).
interval= 60_000: number; Milliseconds between candles.
volatility= 0.006: number; Relative size of each move.

Prop	Type	Default	Description
count*	number	—	Number of candles.
seed	number	7	Random seed.
start	number	100	First open price.
startTime	number	Date.UTC(2026, 0, 5, 9, 30)	Time of the first candle (ms).
interval	number	60_000	Milliseconds between candles.
volatility	number	0.006	Relative size of each move.