Candlestick Chart

Prices over time as candles, like a trading chart: open, high, low and close per period, with volume. Plain SVG.

$ pnpm dlx shadcn@latest add https://dashral.com/r/candlestick-chart.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/candlestick-chart.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/candlestick-chart

Usage

example.tsx

1import { CandlestickChart } from "@/components/dashral/candlestick-chart"
2
3<CandlestickChart
4  data={[
5    { time: "2026-10-20", open: 182.4, high: 186.1, low: 181.2, close: 185.3, volume: 51200 },
6    { time: "2026-10-21", open: 185.3, high: 187.9, low: 183.6, close: 184.1, volume: 48900 },
7    { time: "2026-10-22", open: 184.1, high: 189.2, low: 183.8, close: 188.7, volume: 62300 },
8  ]}
9  formatOptions={{ style: "currency", currency: "USD" }}
10  aria-label="ACME, daily"
11/>

Examples

Live trading card

An exchange-style card: the last candle moves every second, a new one opens every ten, and the timeframe redraws the chart.

BTC/USDT

Bitcoin · sample data

$64,264.68

+0.72% 24h

24h high: $64,637.96
24h low: $63,583.48
24h volume: 49.74K BTC

API reference

CandlestickChart

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`data`	`{ time, open, high, low, close, volume? }[]` The periods, oldest first; time is a timestamp in ms or an ISO date. Required.	—
`height`	`number` In pixels, axes included; the width follows the container.	`320`
`showVolume`	`boolean` Volume bars under the candles.	`when the data has volume`
`showLastPrice`	`boolean` A dashed line at the last close, with its price on the axis.	`true`
`formatOptions`	`Intl.NumberFormatOptions` How prices are written, e.g. { style: "currency", currency: "USD" }.	`two decimals`
`timeFormat`	`Intl.DateTimeFormatOptions` How dates are written under the chart and in the header.	`{ month: "short", day: "numeric" }`
`locale`	`string`	`the LocaleProvider's`
`aria-label`	`string` What the chart shows, e.g. “BTC/USD, daily”.	`"Trend from … to …"`
`classNames`	`{ up, down, header }` up and down are text colors for rising and falling candles (text-success, text-destructive).	—

Keyboard

Keys	Action
`Tab`	Focus the chart
`←`or`→`	Read the previous or next period
`Home`or`End`	The first or last period
`Esc`	Back to the latest period

Accessibility

A group named by your label; the period you move to with the arrow keys is read out (date, open, high, low, close).
Time runs left to right in every language, as on any trading chart; the header follows the page's direction.

Motion

The candles are revealed left to right when the chart first shows; instant with reduced motion. Live updates move the last candle in place.