Depth Chart

Cumulative bid and ask liquidity either side of the mid, with a crosshair that reports the size resting up to any price.

Cumulative book

@spectrumui/depth-chart

SOLSolana · USDC

$245.85

Spread: $0.30 (0.122%)
Bid depth: 9.5K
Ask depth: 11.5K

SOL order book depth — cumulative size by price
Price	Side	Size	Cumulative
$246.00	Ask	235	235
$246.15	Ask	406	641
$246.30	Ask	254	895
$246.45	Ask	230	1125
$246.60	Ask	1148	2273
$246.75	Ask	1292	3565
$246.90	Ask	611	4176
$247.05	Ask	945	5121
$247.20	Ask	518	5639
$247.35	Ask	570	6209
$247.50	Ask	941	7150
$247.65	Ask	529	7679
$247.80	Ask	929	8608
$247.95	Ask	904	9512
$248.10	Ask	1084	10596
$248.25	Ask	883	11479
$245.70	Bid	150	150
$245.55	Bid	307	457
$245.40	Bid	435	892
$245.25	Bid	184	1076
$245.10	Bid	368	1444
$244.95	Bid	595	2039
$244.80	Bid	296	2335
$244.65	Bid	397	2732
$244.50	Bid	664	3396
$244.35	Bid	1772	5168
$244.20	Bid	688	5856
$244.05	Bid	419	6275
$243.90	Bid	867	7142
$243.75	Bid	845	7987
$243.60	Bid	965	8952
$243.45	Bid	585	9537

BTC · wider tick

BTCBitcoin · USDT

$96,480.00

Spread: $24.00 (0.025%)
Bid depth: 348
Ask depth: 316

BTC order book depth — cumulative size by price
Price	Side	Size	Cumulative
$96.49K	Ask	4	4
$96.5K	Ask	6	10
$96.52K	Ask	8	18
$96.53K	Ask	9	27
$96.54K	Ask	11	38
$96.55K	Ask	38	76
$96.56K	Ask	20	96
$96.58K	Ask	48	144
$96.59K	Ask	18	162
$96.6K	Ask	17	179
$96.61K	Ask	24	203
$96.62K	Ask	23	226
$96.64K	Ask	13	239
$96.65K	Ask	17	256
$96.66K	Ask	38	294
$96.67K	Ask	22	316
$96.47K	Bid	5	5
$96.46K	Bid	18	23
$96.44K	Bid	9	32
$96.43K	Bid	15	47
$96.42K	Bid	14	61
$96.41K	Bid	16	77
$96.4K	Bid	20	97
$96.38K	Bid	15	112
$96.37K	Bid	25	137
$96.36K	Bid	65	202
$96.35K	Bid	19	221
$96.34K	Bid	26	247
$96.32K	Bid	29	276
$96.31K	Bid	26	302
$96.3K	Bid	18	320
$96.29K	Bid	28	348

Manual installation

Prefer to copy by hand? Open the Code tab on any example above and switch to the file you need — every source file is there, not just the demo. Drop them in your project like this:

chart-engine.tsxcomponents/spectrumui/charts/chart-engine.tsx
depth-chart.tsxcomponents/spectrumui/charts/depth-chart.tsx

There is nothing to install — this chart draws its own SVG and imports only @/lib/utils.

Usage

import { DepthChart } from '@/components/spectrumui/charts/depth-chart';

<DepthChart book={book} symbol="SOL" />

generateOrderBook() from the engine builds a specimen book; swap it for your feed.
Levels are cumulative from the mid outward — pass total already summed.

Props

Prop	Type	Default	Description
`book`	`OrderBook`	`SOL_BOOK`	Mid, spread, and cumulative bid/ask levels.
`symbol`	`string`	`'SOL'`	Ticker shown in the header.
`name`	`string`	`'Solana · USDC'`	Pair label beside the ticker.
`height`	`number`	-	Plot height in pixels. The header sits above it, so the card is taller than this.
`status`	`'ready' \| 'loading' \| 'empty' \| 'error'`	`'ready'`	Which state to render. All four reserve the same frame height, so nothing shifts when data lands.
`onRetry`	`() => void`	-	Called by the retry button in the error state. Omit it and no button is shown.
`className`	`string`	-	Merged onto the root element.