React depth wedge chart — nested depth as a wedge you can read at a glance. Tiny accessible SVG microchart; RSC-safe static or /interactive.

DepthWedge answers "how much pressure is stacked on each side of the current level, and how wide is the gap between them?". Demand accumulates leftward from the spread and supply rightward, so the two filled wedges show the book's posture in a glyph. The y-scale is linear, full stop — log-depth reading belongs to full-size tools.

DepthWedge

interactive · 4.72 kB · static · 2.4 kB

Install

Import & usereact/depth-wedge

import { DepthWedge } from "@microcharts/react/depth-wedge";// demand, supply — real values under “Sample data” below<DepthWedge data={{ demand, supply }} title="Order book" />

Sample data

const demand = [  { level: 99.75, amount: 420 },  { level: 99.5, amount: 360 },  { level: 99.25, amount: 280 },  { level: 99, amount: 200 },  { level: 98.5, amount: 120 },];const supply = [  { level: 100.25, amount: 300 },  { level: 100.5, amount: 240 },  { level: 100.75, amount: 160 },  { level: 101, amount: 90 },];

Needs package + stylesheetSet up with AI

Try it

When to use it

Good for — order-book depth / liquidity, supply vs demand posture.
Avoid for — a time series (Sparkline) or a single ratio (Delta).

Sizing

Variants

normalized

Edge cases

balanced book

one-sided book

Four homes

Why this default

Linear scale plus a stated levels span because a wedge you can't interrogate must not editorialize — a silent log axis would exaggerate near-spread depth and flatter thin books. The visible range is part of the claim, so whenever the summary names a leading side it scopes the ratio with "within the shown range", and the spread — the gap between the best bid and best ask — is the headline number above the mid line.

Accessibility

The accessible name states the posture, range-scoped — "Demand outweighs supply 1.42× within the shown range; spread 1." (the hero demo's order book). The interactive entry walks the levels with ←/→, announcing the cumulative depth on each side and its distance from the mid.

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*	{ demand, supply }	Level/amount rows per side.
levels	number	± level distance from mid to include.
normalize	boolean	Plot cumulative shares per side.
label	"spread" \| "none"	The gap is the headline number.
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.