OHLC candlesticks with wicks, a price axis, a volume strip, a crosshair with a price tag and an OHLC tooltip. Ships a deterministic sampleCandles helper.
npx shadcn@latest add https://hyperblur.dev/r/candlestick-chart.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/candlestick-chart.tsx.
import { CandlestickChart } from "@/components/hyperblur/candlestick-chart"
<CandlestickChart candles={sampleCandles(60, 3400)} height={220} />| Prop | Type | Default | Description |
|---|---|---|---|
| candles | { label: string; open: number; high: number; low: number; close: number; volume?: number }[] | sampleCandles(48, 100) | Candles from oldest to newest. label is shown on the time axis and in the tooltip. |
| height | number | 240 | Chart height in pixels, volume strip included. The width follows the container. |
| colors | { up?: string; down?: string } | { up: "#34d399", down: "#fb7185" } | Colors for rising and falling candles. |
| showVolume | boolean | true | Show the volume strip under the price panel. |
| priceFormatter | (n: number) => string | Formats prices on the axis, the price tag and the tooltip. Defaults to two decimals. | |
| volumeFormatter | (n: number) => string | Formats volume in the tooltip. Defaults to compact notation. | |
| animate | boolean | true | Grow the candles in from left to right on mount. |