Are you an AI agent?
import { DepthSeries } from '@wick-charts/react';
 
<DepthSeries bids={book.bids} asks={book.asks} />

Order book chart: cumulative bid and ask size stepping away from the mid price. Plots on a numeric X axis — set axis={{ x: { type: 'numeric' } }} on the container. A new bids / asks array morphs the book on screen.

Renders an order book chart on a numeric price axis — set axis={{ x: { type: 'numeric' } }} on <ChartContainer>. Pass bids and asks as [price, size] levels in any order; the series sorts them and draws cumulative size as two stepped walls, bids left of mid and asks right, with a dashed mid marker and a mid · spread label. The view stays centered on mid: it eases to each new mid, wheel and pinch zoom around mid, and drag-pan is off. A new book morphs from the shape on screen, the walls grow out from mid on the first data, and <Tooltip> shows the hovered side, level price and cumulative size. For level deltas, call chart.updateData(id, { bids?, asks? }) — a size of 0 removes a level.

Props

bidsreadonly DepthLevel[]

Bid levels as [price, size], in any order. Cumulative depth is computed from them.

asksreadonly DepthLevel[]

Ask levels as [price, size], in any order. Cumulative depth is computed from them.

options?Partial<DepthSeriesOptions>

Visual options override — span of the default view, side colors, stroke width, intro / update durations.

id?string

Stable series ID — same value across remounts.

visible?default trueboolean

Show/hide the series without unmounting it — excludes it from the Y-range fit and tooltip/legend. Default true. Live.