Ohlc
Ohlc draws the open, high, low, and close of each period as one mark, sized to sit in a table cell.
- encodes
- candle body span + wick extent on a shared price scale
- precision
- medium — hover announces the exact four prices
- nodes
- ≤ 40 (~2 nodes per candle, ≤ 20 periods)
Four numbers per period, in one table cell: open, high, low, close. Together they say how far a session ran and which
way it closed, one row per instrument. Direction comes from valence color and from the body geometry, so it never rests
on color alone. maxPeriods renders the most recent N sessions and warns in development past that — extra periods are
dropped visibly, never averaged into composite candles.
Install
import { Ohlc } from "@microcharts/react/ohlc";// sessions — real values under “Sample data” below<Ohlc data={sessions} title="ACME sessions" />Sample data
const sessions = Array.from({ length: 20 }, (_, i) => { const base = 140 + Math.sin(i / 3) * 8 + i * 0.6; return { open: Math.round(base * 10) / 10, high: Math.round((base + 3 + (i % 3)) * 10) / 10, low: Math.round((base - 3 - (i % 2)) * 10) / 10, close: Math.round((base + (i % 2 === 0 ? 2 : -1.5)) * 10) / 10, };});Try it
When to use it
Use it for watchlist table rows and ticker KPI cards. For a single close series use Sparkline, and keep the count under about 20 periods.
Sizing
Variants
Edge cases
A session that opens and closes at the same price renders neutral and keeps a minimum 1-unit body height, so a flat period stays visible instead of collapsing to a hairline. A single period renders its own bar against its own range.
Four homes
Accessibility
The accessible name is the run read — "20 periods. Last close 150.3, up 7.4%; range 136.4 to 156." The interactive entry announces each session's four prices ("Period 18 of 20: open 145.6, high 150.6, low 141.6, close 144.1.").
The interactive entry follows the shared interaction contract:
arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or
Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape.
On touch, a tap pins and a drag scrubs.
Props
| Prop | Type | Notes |
|---|---|---|
| data* | { open; high; low; close }[] | Periods, oldest first. |
| mode | "candle" | "bars" | Candle bodies or open/close ticks. |
| maxPeriods | number | Renders the most recent N (never averaged). |
| label | "last" | "none" | Last close in a right gutter. |
| animate | boolean | interactiveOpt-in entrance motion when the chart mounts client-side — add import "@microcharts/react/motion" once. Inert on the server, on hydrated server HTML, and under prefers-reduced-motion. |
Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.