Depth chart
A React component in Beamline's Trading category.
Cumulative bid and ask depth as stepped areas around the mid, with hover readout.
Use it for
- Showing how much size sits within a price range.
Not for
- Picking a price level → order-book.
Anatomy
- bid area + line
- ask area + line
- mid line
- size axis
- price axis
- readout
Variants
- range: fraction of mid
States
- live
- hover
- empty (no bids and no asks: says so instead of drawing)
- hover (readout names the side in words)
- empty
- RTL (price axis stays left to right)
Keyboard
- Presentational SVG with a text summary (role=img aria-label).
Motion
None: the areas redraw in place on each book update; the hover readout follows the pointer instantly. Marks take the look's line weight and fill finish (dots in mono, hatching in ink), never an animation.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
bids / asks (required) | Level[] | — | |
range | number | 0.01 | |
height | number | 220 | |
style / ref | CSSProperties / native Ref | — | |
classNames | DepthChartClassNames | — |
Dependencies
d3-scale, d3-shape
Import
import { DepthChart } from "@/components/depth-chart/depth-chart";Get it
Depth chart is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in Trading
- Funding countdown: Perpetual funding rate with who pays, and a live countdown ring to the next funding.
- Market heatmap: Treemap of markets sized by weight and coloured by change, grouped by sector, with hatched no-data tiles.
- Order book: Asks, spread and bids with cumulative depth bars, grouping, change flashes and keyboard price picking.
- Order ticket: Buy/sell order entry with limit, market and stop types, % of balance, inline validation and a live cost summary.
- Positions table: Open positions with live unrealised PnL, liquidation warnings and close actions.
- Price chart: Candles, line or area price chart with volume, OHLC legend and reference lines, built for live ticks.
- Price ticker: Symbol, last price with a directional flash, 24h change and stats.
- Ticker tape: A continuously scrolling row of symbols with price, change and mini trend; pauses on hover and focus.
- Trades tape: Recent trades, newest first, with side glyphs, large-print marking and one-time arrival flashes.
- Watchlist: A selectable, sortable list of markets with mini trends, prices, changes and stars.