Candlestick chartPro
OHLC candles with volume, moving averages and a price crosshair.
Aug 30O 248.05H 248.80L 247.43C 248.44
When to use
- Price history for stocks, crypto or any open/high/low/close data.
When not to use
- Single-value series: use a line chart.
Installation
Usage
Import it from @/components/ui/candlestick-chart after installing.
example.tsx
import { CandlestickChart, type Candle } from "@/components/ui/candlestick-chart";
export function Price({ candles }: { candles: Candle[] }) {
return <CandlestickChart data={candles} averages={[{ period: 20, color: "var(--chart-1)" }]} />;
}API reference
CandlestickChart
Candles, volume bars, moving averages and a crosshair with a price tag.
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { label; open; high; low; close; volume? }[] | – | Candles in time order. |
| averages | { period; color }[] | – | Simple moving averages. |
| showVolume | boolean | true | Volume bars at the bottom. |
| height / formatPrice | number / (n) => string | – | Size and price format. |
Accessibility
- role="img"; the OHLC readout shows the hovered or latest candle as text.
Motion
- Crosshair and price tag follow the pointer.
Responsive behavior
- Fills its width; candle width scales with count.
Performance
- Up to a few hundred candles; aggregate longer ranges.
Notes for AI
- Up candles are green, down red; keep that convention.
This page as Markdown, for assistants and coding agents:
/components/candlestick-chart/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt