Candlestick Chart
An OHLC candlestick chart — direction-colored bodies over high–low wicks on a shared time axis, with a staggered spring entrance, hover dimming, a crosshair tooltip, and a loading state.
Installation
pnpm add @blakeui/pro-reactnpm install @blakeui/pro-reactyarn add @blakeui/pro-reactbun add @blakeui/pro-reactUsage
CandlestickChart is built on visx scales and the
motion library. It is a single component: pass OHLC data — one
{ date, open, high, low, close } row per time point. Each candle draws its body from open to
close (flipping direction with sign; an equal open and close renders a 1px doji body) over a
1.5px high–low wick. Direction sets the color: up candles (close ≥ open) read --chart-1, down
candles --chart-2; chart chrome (crosshair, axis labels) maps to the neutral tokens. Hovering
resolves the nearest candle by time — the rest of the field dims behind it, while the crosshair,
floating OHLC tooltip, and time pill track the candle.
import {CandlestickChart} from "@blakeui/pro-react";
const prices = [
{date: "2026-01-01", open: 100, high: 106, low: 97, close: 104},
{date: "2026-01-02", open: 104, high: 112, low: 102, close: 110},
// …
];
function App() {
return <CandlestickChart data={prices} valuePrefix="$" />;
}Motion
On mount each candle's wick and body grow from their own vertical centers on a spring
(duration 0.8, bounce 0.15) while the candle fades in over 150ms; the per-candle stagger
spreads across 60% of the animationDuration window so the reveal sweeps left→right. Hover
dimming transitions over 150ms both ways; the tooltip panel spring-follows the crosshair, and the
four OHLC values always roll through the shared Odometer. All motion collapses to an instant
render under prefers-reduced-motion, and the chart exposes the active candle to assistive tech
through a polite live region (arrow keys, Home/End, and Escape drive the crosshair from the
keyboard).
Loading state
Set status="loading" to show a stroke-only skeleton wave while data resolves; flip it to
"ready" and the load→ready choreography plays — the pulse flows out, the caption exits, and the
candles spring in staggered from their centers.
API Reference
CandlestickChart
The single chart component. Measures its container, derives the time x-scale and the wick-inclusive linear y-scale from the data, and renders the candles, hover layer, and loading chrome.
| Prop | Type | Default | Description |
|---|---|---|---|
data | CandlestickChartDataPoint[] | — | One OHLC row per time point: {date, open, high, low, close}. |
xDataKey | string | "date" | Key in each row holding the x (time) value: Date, ISO string, or epoch ms. |
margin | Partial<Margin> | 40 | Plot margins (all sides default to 40). |
aspectRatio | string | "2 / 1" | CSS aspect ratio of the chart box (ignored when height is set). |
height | number | — | Fixed pixel height. Overrides aspectRatio. |
animationDuration | number | 1100 | Entrance duration in ms — the per-candle stagger spreads over 60% of it. |
candleGap | number | 0.2 | Gap between candles as a fraction of the slot width (0–1). Ignored when candleWidth is set. |
candleWidth | number | — | Fixed candle body width in px. Overrides candleGap; capped at the slot width. |
upColor | string | "var(--chart-1)" | Fill for up candles (close ≥ open). |
downColor | string | "var(--chart-2)" | Fill for down candles (close < open). |
fadedOpacity | number | 0.3 | Opacity of the non-hovered candles while one is hovered. |
fadeOnHover | boolean | true | Dim the non-hovered candles on hover. |
numTicks | number | 5 | Approximate x tick count. |
xTickFormat | (date: Date, index: number) => string | — | Custom x tick formatter. |
yTickFormat | (value: number) => string | — | Custom y tick formatter. |
showGrid | boolean | false | Render grid rows. The canonical candlestick look is chartless-chrome. |
showXAxis | boolean | true | Render the x axis. |
showYAxis | boolean | false | Render the y axis. The canonical candlestick look is x-axis-only. |
showTooltip | boolean | true | Show the hover tooltip layer. |
showCrosshair | boolean | true | Show the vertical crosshair. |
showDot | boolean | true | Show the dot on the hovered candle's close. |
showPill | boolean | true | Show the animated time pill under the crosshair. |
valuePrefix | string | — | Static text rendered before each tooltip value (e.g. "$"). |
status | "loading" | "ready" | "ready" | While loading, shows the skeleton wave. Flipping to ready plays the entrance. |
loadingLabel | string | "" | Centered caption shown while loading. Empty string hides it. |
Also supports all native div HTML attributes.
CandlestickChartDataPoint
Each row in data describes one candle.
| Field | Type | Description |
|---|---|---|
date | Date | string | number | X (time) value — a Date, ISO string, or epoch ms (rename via xDataKey). |
open | number | Opening value — one end of the candle body. |
high | number | Period high — the top of the wick. |
low | number | Period low — the bottom of the wick. |
close | number | Closing value — the other end of the body. close ≥ open renders the up color; equal open and close renders a 1px doji body. |
Bar Chart
A composable bar chart with grouped series, pill caps, an animated entrance, an interpolated hover tooltip, and a loading state.
Composed Chart
A mixed-mark time-series chart — areas, time-aligned bars, and lines on one shared time axis with optional dual y-axes, an animated entrance, and a loading state.