Candlestick Chart

Sep 26, 25
AAPL
O 144.92H 146.11L 142.94C 143.51
Jun 19, 25
Jul 09, 25
Jul 29, 25
Aug 17, 25
Sep 06, 25
Sep 26, 25

Customize

Up color
Down color
0.60

Installation

Installs are paused for now. You can still preview and customize every component on its page.

Usage

import { CandlestickChart, type Candle } from "@/components/candlestick-chart";

const data: Candle[] = [
  { time: "Mon", open: 220.1, high: 226.4, low: 218.3, close: 224.8 },
  { time: "Tue", open: 224.8, high: 229.2, low: 221.6, close: 219.4 },
];

<CandlestickChart data={data} name="AAPL" />

Hover to see a candle's prices. Drag to pan and scroll to zoom.

Props

PropType

One entry per candle with time, open, high, low and close.

Series name shown in the tooltip.

Color when the close is at or above the open.

Default"#22c55e"

Color when the close is below the open.

Default"#ef4444"

Max width in pixels. The height follows.

Default640

Formats the prices in the tooltip.

Candle selected at first. Defaults to the last one.

How many candles show at once.

Default100

Turns drag to pan and scroll to zoom on or off.

Defaulttrue
Defaulttrue

Number of date labels.

Default6
Defaulttrue

Body width as a share of each column, from 0 to 1.

Default0.6
Default14