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
Body width0.60

Installation

pnpm dlx shadcn@latest add @clover-ui/candlestick-chart

Usage

import { CandleChartStick, 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 },
];

<CandleChartStick 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