Depth chart — Björk UI

Components•Depth chart

Depth chart

Cumulative order book depth: bids in ink to the left of mid, asks in the accent to the right. Hover walks the book and reads what that size would cost, with the average fill marked on the axis and the impact from mid in basis points. Live updates ease in, and the y range never clips a wall of size.

Dependencies

Motion

Copy below cli

npx shadcn add @bjork-ui/depth-chart

How to use

import { DepthChart } from "@/components/bjork-ui/charts/depth-chart";<DepthChart  bids={[{ price: 101.15, size: 120 }, { price: 101.1, size: 340 }]}  asks={[{ price: 101.2, size: 90 }, { price: 101.25, size: 410 }]}/>

ACME order book
Side	Price	Size	Cumulative
Bid	101.20	621	621
Bid	101.15	122	743
Bid	101.10	188	931
Bid	101.05	146	1.1K
Bid	101.00	108	1.2K
Bid	100.95	100	1.3K
Bid	100.90	228	1.5K
Bid	100.85	261	1.8K
Bid	100.80	151	1.9K
Bid	100.75	148	2.1K
Bid	100.70	224	2.3K
Bid	100.65	950	3.2K
Bid	100.60	354	3.6K
Bid	100.55	387	4K
Bid	100.50	227	4.2K
Bid	100.45	142	4.4K
Bid	100.40	1.4K	5.8K
Bid	100.35	98	5.9K
Bid	100.30	435	6.3K
Bid	100.25	376	6.7K
Bid	100.20	347	7K
Bid	100.15	138	7.2K
Bid	100.10	345	7.5K
Bid	100.05	301	7.8K
Bid	100.00	349	8.2K
Bid	99.95	493	8.7K
Bid	99.90	451	9.1K
Bid	99.85	475	9.6K
Bid	99.80	371	10K
Bid	99.75	601	10.6K
Bid	99.70	504	11.1K
Bid	99.65	2.3K	13.3K
Bid	99.60	180	13.5K
Bid	99.55	650	14.2K
Bid	99.50	470	14.6K
Bid	99.45	434	15.1K
Bid	99.40	514	15.6K
Bid	99.35	638	16.2K
Bid	99.30	777	17K
Bid	99.25	660	17.6K
Ask	101.25	50	50
Ask	101.30	70	120
Ask	101.35	190	310
Ask	101.40	245	555
Ask	101.45	260	815
Ask	101.50	255	1.1K
Ask	101.55	252	1.3K
Ask	101.60	219	1.5K
Ask	101.65	168	1.7K
Ask	101.70	108	1.8K
Ask	101.75	230	2K
Ask	101.80	1.4K	3.4K
Ask	101.85	344	3.8K
Ask	101.90	220	4K
Ask	101.95	95	4.1K
Ask	102.00	124	4.2K
Ask	102.05	454	4.6K
Ask	102.10	649	5.3K
Ask	102.15	159	5.5K
Ask	102.20	355	5.8K
Ask	102.25	391	6.2K
Ask	102.30	161	6.4K
Ask	102.35	167	6.5K
Ask	102.40	421	6.9K
Ask	102.45	457	7.4K
Ask	102.50	576	8K
Ask	102.55	599	8.6K
Ask	102.60	320	8.9K
Ask	102.65	356	9.3K
Ask	102.70	280	9.5K
Ask	102.75	143	9.7K
Ask	102.80	573	10.3K
Ask	102.85	398	10.7K
Ask	102.90	722	11.4K
Ask	102.95	210	11.6K
Ask	103.00	229	11.8K
Ask	103.05	634	12.4K
Ask	103.10	1.6K	14.1K
Ask	103.15	378	14.4K
Ask	103.20	253	14.7K

Options

Feed