DepthWedge

Demand outweighs supply 1.42× and the spread is 1. DepthWedge draws the shape behind those numbers: demand accumulates leftward from the spread and supply rightward, so two filled wedges carry the book's posture in a glyph, with the spread — the gap between the best bid and the best ask — printed above the mid line. The y-scale is linear, full stop. A silent log axis would exaggerate near-spread depth and flatter thin books, and log-depth reading belongs to full-size tools.

Install

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

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 },];

Try it

When to use it

Use it for order-book depth or liquidity and for supply vs demand posture. For a time series reach for Sparkline; for a single ratio, Delta.

Sizing

Variants

normalize plots cumulative shares per side instead of absolute amounts. levels sets how far from the mid the wedges reach, and that visible range is part of the claim: whenever the summary names a leading side it scopes the ratio with "within the shown range".

Edge cases

Equal totals per side make the summary state the balance rather than name a lead. An empty side renders a single wedge and the spread reads 0, since there is no gap to measure without both a best bid and a best ask.

Four homes

Accessibility

The accessible name states the posture, scoped to the shown range: "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

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.