Ohlc

Ohlc answers "what was the price action per period?" — open, high, low, close, in a cell. Direction is encoded by valence color AND body geometry, never color alone.

Install

import { Ohlc } from "@microcharts/react/ohlc";// sessions — real values under “Sample data” below<Ohlc data={sessions} title="ACME sessions" />

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

• Good for — watchlist table rows, ticker KPI cards.
• Avoid for — a single close series (Sparkline), or more than ~20 periods.

Sizing

Variants

Edge cases

Four homes

Why this default

maxPeriods renders the most recent N sessions and warns in development past it — data is truncated visibly, never averaged into fake candles. Bodies keep a minimum 1-unit height so doji sessions stay visible.

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

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.