# DepthWedge (/docs/charts/depth-wedge)

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.

```tsx
import { DepthWedge } from "@microcharts/react/depth-wedge";

<DepthWedge data={{ demand, supply }} title="Order book" />
```

## Install

```tsx
import { DepthWedge } from "@microcharts/react/depth-wedge";

<DepthWedge data={{ demand, supply }} title="Order book" />
```

Setup (package + stylesheet): [Quickstart](/docs/quickstart#set-up-with-an-ai-agent) or paste [`/agent-setup.md`](/agent-setup.md) into your agent.


## 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).


## Variants

```tsx
<DepthWedge
  data={{
    demand: [
      { level: 99.5, amount: 420 },
      { level: 99, amount: 260 },
    ],
    supply: [
      { level: 100.5, amount: 300 },
      { level: 101, amount: 180 },
    ],
  }}
  normalize
/>
```

## Edge cases

```tsx
// equal totals per side — the summary states the balance instead of a lead
<DepthWedge
  data={{
    demand: [
      { level: 99.5, amount: 200 },
      { level: 99, amount: 100 },
    ],
    supply: [
      { level: 100.5, amount: 200 },
      { level: 101, amount: 100 },
    ],
  }}
/>
```

```tsx
// an empty side renders a single wedge; the spread is 0 (there is no gap
// to measure without both a best bid and a best ask)
<DepthWedge data={{ demand: [{ level: 99.5, amount: 200 }], supply: [] }} />
```


## 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](/docs/accessibility#one-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 | Description |
| --- | --- | --- |
| `data` (required) | `{ 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` | (interactive) Opt-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](/docs/quickstart#the-shared-grammar).