# Candlestick chart

> OHLC candles with volume, moving averages and a price crosshair.

Component · Pro · https://lodeui.com/components/candlestick-chart

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

```bash
npx shadcn@latest add @lode/candlestick-chart
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="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.

## Related

- [Line chart](https://lodeui.com/components/line-chart) — Multi-series lines with legend toggles, crosshair and shared tooltip.
- [Sparkline](https://lodeui.com/components/sparkline) — A tiny trend line that draws itself in.