DepthChart

Chart
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.
src/charts/depth-chart
View in Charts

Playground

Every control sets a real prop of DepthChartProps. The JSX below updates as you go.
OLY order book
Bids
Asks
Props
hideLegend
boolean
hideGrid
boolean
compact
boolean
JSX · DepthChartProps
<DepthChart />

Variants

1 examples from src/charts/depth-chart/depth-chart.md, each rendered live from its own JSX.
Bids
Asks
Compact
<DepthChart
compact
bids={[
{ price: 191.3, size: 90 },
{ price: 191.15, size: 150 },
{ price: 191.0, size: 220 },
{ price: 190.85, size: 310 },
{ price: 190.7, size: 420 }
]}
asks={[
{ price: 191.6, size: 110 },
{ price: 191.75, size: 180 },
{ price: 191.9, size: 260 },
{ price: 192.05, size: 350 },
{ price: 192.2, size: 470 }
]}
/>

Anatomy

OLY order book
Bids
Asks
1
Chart frame
2
Bids
3
Asks
4
Legend
5
Gridlines
Dimmed parts appear only in some states or variants.

Props

12 props on DepthChartProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
3 props
bids *
DepthLevel[]
–
Bid levels (any order; sorted internally).
asks *
DepthLevel[]
–
Ask levels (any order; sorted internally).
title
string
–
Optional heading shown above the plot.
Density
2 props
compact
boolean
false
plain
boolean
false
Strip the card surface for nesting inside an existing card (mirrors Stats).
Furniture visibility
7 props
hideLegend
boolean
false
Furniture visibility.
hideGrid
boolean
false
Furniture visibility.
hideAxes
boolean
false
Furniture visibility.
formatValue
(v: number) => string
–
Formats tick labels and accessible values (data formatting, not styling).
spread
string
–
The spread's label ("spread 0.12%"): drawn as a dashed guide midway between the best bid and the best ask, with this label in a pill at its top. Omit for no guide.
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.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
group
image
img
ARIA on web
aria-label

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Bids
Asks
Web
control 10 · field 10 · card 16 · Instrument Sans
Bids
Asks
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Bids
Asks
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<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 }
]}
/>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--bad
--fd
--fm
--ft
--ln
--ok
--sf
--sh-sm
--tx2
--tx3

Related components