Candlestick Chart
OHLC candles with a volume strip. Unlike every other chart here it does not stretch — a stretched candle varies its body width with the container while the wick stays one unit, and the body-versus-wick reading stops working.
src/components/ui/candlestick-chart.tsxAbout
From the component's own source, where it was written.
OHLC candles with an optional volume strip.
Candles are drawn in an unstretched SVG — a fixed viewBox scaled by the container, with preserveAspectRatio left at its default. Every other chart here stretches, but a stretched candle is a lie: the body width would vary with the container while the wick stays one unit, and the classic reading of body-versus-wick stops working.
The price axis is padded to the extremes of the *wicks*, not the bodies, or the highest high clips at the top edge exactly when it matters.
Install
npx astralyx-ui add candlestick-chart
Usage
import { CandlestickChart } from '@/components/ui/candlestick-chart'
<CandlestickChart candles={candles} />Composer
Change the props and the source below follows.
<CandlestickChart candles={candles} showVolume={true} />Examples
OHLC
<CandlestickChart candles={candles} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
CandlestickChart
Extends Omit<ComponentProps<'figure'>, 'height'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| candles | Candle[] | required | { time, open, high, low, close, volume? }. |
| height | number | 220 | — |
| showVolume | boolean | true | — |
| upColor | string | 'var(--green)' | — |
| downColor | string | 'var(--destructive)' | — |
| locale | string | 'en-GB' | — |
| upLabel | ReactNode | 'Up' | Legend entries. |
| downLabel | ReactNode | 'Down' | — |
| volumeLabel | ReactNode | 'Volume below' | — |
Types
Candle
OHLC candles with an optional volume strip.
| Field | Type | Description |
|---|---|---|
| time | string | number | — |
| open | number | — |
| high | number | — |
| low | number | — |
| close | number | — |
| volume? | number | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| axis padding | wicks | The scale is padded to the extremes of the wicks, not the bodies — otherwise the highest high clips exactly when it matters. |
| doji | handled | A body with equal open and close still draws a visible line rather than a zero-height rect. |