DepthChart

The order-book view: cumulative bid and ask step areas mirrored around the spread, bids in the success tone and asks in destructive, on a numeric price axis.
OLY order book
Bids
Asks
iOS
OLY order book
Bids
Asks
Android
OLY order book
Bids
Asks
Web
tsx
<DepthChart
title="OLY order book"
bids={[
{ price: 191.3, size: 80 },
{ price: 191.15, size: 120 },
{ price: 191.0, size: 116 },
{ price: 190.85, size: 118 },
{ price: 190.7, size: 176 },
{ price: 190.55, size: 190 },
{ price: 190.4, size: 210 },
{ price: 190.25, size: 236 }
]}
asks={[
{ price: 191.6, size: 90 },
{ price: 191.75, size: 122 },
{ price: 191.9, size: 110 },
{ price: 192.05, size: 154 },
{ price: 192.2, size: 154 },
{ price: 192.35, size: 210 },
{ price: 192.5, size: 222 },
{ price: 192.65, size: 240 }
]}
/>

Props

Prop
Description
bids
required
DepthLevel[]
Bid levels (any order; sorted internally).
asks
required
DepthLevel[]
Ask levels (any order; sorted internally).
title
string
Optional heading shown above the plot.
compact
boolean
Density (omit for the default plot size).
hideLegend
boolean
Furniture visibility.
hideGrid
boolean
Furniture visibility.
hideAxes
boolean
Furniture visibility.
formatValue
(v: number) => string
Formats tick labels and accessible values (data formatting, not styling).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

Both sides of the book

Don’t
Bids
Asks
Plot one side alone: with no asks the price axis covers only the bids, nothing marks the spread, and the Asks legend entry labels nothing.
Do
Bids
Asks
Pass the bids and the asks together; the two sides meet at the spread, the gap a trader reads first.
← ComposedChart
FunnelChart →