Appearance

Personalize your experience

Mode
Accent Color
Direction
DOM Ladder

DOM Ladder

Charts / Chart Types / Volume Charts

Depth of market on the chart's price scale: resting bids and asks, your orders, traded volume and delta at every price, with recent candles beside it.

What the chart shows

A DOM (depth of market), also called a price ladder, lists every price in a column with the size waiting to buy (bids) below the market and the size waiting to sell (asks) above it. traders use it to see where liquidity sits, how it changes, and where trading is happening now.

In Quatick the DOM is a chart type. The ladder is drawn against the chart's price , one row per price, with configurable . To its left a candle strip shows recent candles on the chart's own time axis, so you can pan and zoom it like any chart. The ladder follows the mid price automatically.

Menu
Chart type → → DOM ladder
Engine type
dom-ladder
Data
order-book snapshots; with aggressor side for the volume, delta and last
Renderer
Canvas 2D; the candle strip uses the real
Good for
Scalping, watching the queue at the best prices, judging how much size a market order will

Live order book

The same ladder on the real-time spot book, streamed into this page. Change the symbol above the pane; a row to see the depth a to it would take.

Connecting to Binance BTC/USDT…
Connecting to Binance BTC/USDT…
Real time (Binance): stacked ladder with stepped cumulative depth and the depth chart aligned to its rows.

Anatomy of the ladder

Anatomy of the DOM ladder7024515.030-413524514.555+664024514.080-107424513.5140+1812024513.0210-229024512.5330+355824512.0420-406524511.5510+524224511.0600+644224510.5580-586524510.0470+405824509.5360-369024509.0260+2212024508.5180-1452024508.0120+108824507.580-613524507.050+37024506.520-155Long 5 @ 24509.5 P/L +7.50BuyBidPriceAskSellVolumeDeltaSpr 0.5 · +9% bidlarge ask (wall)your sell orderemphasised rowbest ask (glow)last traded pricespread boundarybest bid (glow)position & P/Lyour buy orderlarge bid (wall)traded volumetraded deltaheadercandle strip (chart time axis)box = ladder's price window
Every part of the DOM ladder. Asks are above the spread boundary, bids below it.
PartWhat it isHow to read it
Price columnOne row per price, grouped by Book ticks per row. run from high (top) to low (bottom), on the same scale as the price .
Bid columnSize resting to buy at each price below the market.A depth bar grows to the left with the size.
Ask columnSize resting to sell at each price above the market.A depth bar grows to the with the size.
Best bid / best askThe bid and lowest ask, outlined and optionally glowing.The prices where a market order first.
Spread boundaryLine between the best ask and the best bid.The header shows the spread size.
Last traded priceHighlighted price row.Where the last trade printed: at the ask (buyers lifting) or at the bid (sellers hitting).
order (wall)Levels whose size is at least N × the level, highlighted.Levels that may stop price, or that may be when price comes close.
Buy / Sell Your working orders at their prices.Shows where your orders sit relative to the queue.
Volume traded at each price in the chosen .High-volume prices are where the market accepted .
Delta columnBuy minus sell volume traded at each price.Positive: buyers lifted offers there. Negative: sellers hit bids.
Last columnVolume traded at each price in the last few seconds.Shows where trading is happening now.
Position lineYour average price with side, size and open P/L.Open P/L = (last price − average price) × signed size.
Emphasised Every Nth row is tinted.Helps the eye find prices.
HeaderColumn titles, plus spread and next to the ladder.Imbalance = (bid size − ask size) / total size of the visible . +9% bid means more size on the bid side.
Candle stripRecent candles on the chart time , left of the ladder.Context for the ladder. The box marks the ladder's price when the strip uses its own scale.

How the ladder is built, step by step

  1. 1
    Receive the book
    Each order-book update reaches the chart through chart.setOrderbookSnapshot(). The terminal does this automatically for brokers that stream depth.
  2. 2
    Group into rows
    Levels are grouped into of Book ticks per row × the book . Sizes in the same row are .
  3. 3
    Place the window
    With Keep centred on the mid, the chart's price scale is set around the mid price. It moves only when the mid leaves the central , so do not jump with every .
  4. 4
    Count traded volume
    from the tape (or inferred from ticks) are to the price row they printed at, for the chosen : , visible bars, or last N minutes. Buy and sell volume give the delta column.
  5. 5
    Fall back to bars
    Before any trade has been recorded, volume is estimated by spreading each bar's volume over its range, and the header says Volume from bars. When the average candle spans more than a quarter of the visible ladder (daily candles, for example), this estimate is skipped because it would be meaningless.
  6. 6
    Draw
    , depth bars, highlights, your orders, the position line, flashes and the header are drawn; the candle strip is drawn with the chart's .

Depth: per level or cumulative

Per level vs cumulative from bestPer level24510.06024509.514024509.09024508.530024508.08024507.5120Cumulative24510.06024509.520024509.029024508.559024508.067024507.5790Cumulative: selling 500 at market would trade down to 24508.5.
The same bids shown per level and cumulative from the best bid.
  • Per level shows the size at each price. Use it to find walls.
  • from best adds sizes outward from the . Read across to see how far a market order of a given size would move price.
  • Bar scale maps size to bar length. (default) keeps levels visible beside a wall; compresses more.

Auto-centring

Auto-centring with a re-centre bandmid inside band: staymid left band: re-centremid moves, still insideBand = "Re-centre when the mid leaves" × half the ladder height.
The ladder only re-centres when the mid price leaves the central band.

A ladder that re-centres on every is hard to read and impossible to click accurately. The ladder stays still while the mid moves inside the , then re-centres in one step. A wider band (higher ) moves it less often. Turn Keep centred on the mid off to the ladder freely with the price .

The candle strip

Candle strip price scaleLadder pricesaligned with rows,older candles clippedOwn scale (fit)all candles visible;box = ladder windowAutoladder prices whilecandles fit;own scale when theywould be clipped by> 2% of the ladder spanPan or zoom the chart to show more or fewer candles in the strip.
Three ways to scale the candle strip.
  • The strip uses the chart's time , so dragging or wheel-zooming the chart shows more or fewer candles.
  • Same prices as the ladder lines candles up with ladder . A narrow ladder clips older candles.
  • Own scale fits all visible candles and draws a box for the ladder's .
  • Auto (default) uses the ladder prices unless that would clip the candles by more than 2% of the ladder span.
  • Ladder sets how wide the are; the strip gets the rest of the pane. The strip is never narrower than Strip , unless that would take more than 35% of the pane.

Reading the ladder, step by step

  1. 1
    Read the spread and imbalance
    A wide spread means thin liquidity at the top of the book. A strong bid imbalance means more size waiting to buy than to sell in view.
  2. 2
    Watch the best bid and ask
    When the best ask size shrinks quickly while the last price at the ask, buyers are eating the offer; a move up is likely once it is gone.
  3. 3
    Find the walls
    Highlighted levels can stop price. Watch the flashes: an orange flash on a wall as price approaches means it is being .
  4. 4
    Read traded delta
    positive delta at a price below the market means buyers in there. Such prices often hold on a retest.
  5. 5
    Check the last column
    Concentrated recent volume at one price, without price moving, signals absorption at that level.
  6. 6
    Check your orders
    Your orders in the Buy and Sell show where you sit. A wall in front of your order means a long queue.

Setting it up, step by step

  1. 1
    Choose a symbol with depth
    The broker must stream the order book. Delta Exchange (and other crypto symbols) also stream with aggressor side; elsewhere trades are inferred from volume.
  2. 2
    Select the chart type
    Chart type menu → → DOM ladder. Until the first snapshot arrives the header shows Waiting for order book.
  3. 3
    Open the settings
    Click the gear to the left of the name.
  4. 4
    Set the row size
    Keep 1 book per row for liquid . For instruments with a tiny tick (many crypto pairs), raise Book ticks per row so the ladder covers a useful range.
  5. 5
    Pick the columns
    Start with Orders · book · volume · delta. Use Book only for the narrowest ladder.
  6. 6
    Set the volume window
    for context, Last N minutes for short-term activity.
  7. 7
    Size the layout
    Set Ladder and Row height so the ladder shows enough , then the candle strip the rest.

Feeding the ladder from code

typescript
chart.setOrderbookSnapshot({ bids: [[24510.5, 74], [24510.0, 88]], asks: [[24511.0, 135], [24511.5, 70]] });
chart.addTrades([{ time: chartTimeSeconds, price: 24511.0, size: 12, side: 'buy' }]);

// Your working orders and position
chart.setDomOrders([
  { price: 24509.0, size: 5, side: 'buy' },
  { price: 24513.5, size: 5, side: 'sell', label: 'TP' },
]);
chart.setDomPosition({ price: 24509.5, size: 5 }); // positive = long, null = flat

Common setups

Futures scalping

1 per row, row height 18 px, Orders · book · volume · delta, volume over the last 30 minutes, flashes on at 15%.

Crypto perpetuals

10 ticks per row, sizes, walls at 6× , last column 5 s.

Context first

Ladder 360 px, candle strip on auto scale, volume over the .

Limitations

!
Caution:The ladder displays your orders and position; it does not place orders. Use the terminal's order to trade.
  • The book shows only the levels the broker sends, often 5 to 20 per side.
  • Traded volume before the chart was opened comes from bars and is approximate; exact volume needs the trade tape.
  • Inferred take their side from the rule (uptick = buy), which is wrong for some .
  • Hidden and iceberg orders are not visible in the book.

Native Quatick implementation and live demos

The charts below are the real Quatick engine (@quatick/quatick-charts), the same code the trading terminal runs, fed by a deterministic simulated market. Switch between demos, press Run market to stream ticks, order-book snapshots and , to pan and use the wheel to zoom. Show code exactly the calls each makes.

Live demo
The default ladder with working orders and a long position. The forming candle in the strip and the ladder's last row always show the same price.
Loading the Quatick chart engine…
dom-ladder · 0 bars · last — · 0 trades · drag to pan, wheel to zoom

How the engine draws DOM ladder

DOM ladder: native Quatick pipelineDATA INENGINE COMPUTESRENDERERDRAWN ON TOPsetOrderbookSnapshot(book)addTrades(trades)chart.update(bar)setDomOrders /setDomPosition1. Group book into rows2. Re-centre on mid (band)3. Live price = newest ofbar close and trade4. Volume / delta per rowfrom the tapeCanvas 2DCandle strip (samelive price)Walls, flashes,orders, positionHeader: spread,imbalanceLive update cost: Redraw on every snapshot, trade or tick
Inputs, computation, renderer and overlay layers of the DOM ladder chart type in the native engine.
StageWhat happens
insetOrderbookSnapshot(book)
addTrades()
chart.update(bar)
setDomOrders / setDomPosition
Group book into
Re-centre on mid ()
price = newest of and trade
Step 4Volume / delta per row from the tape
Canvas 2D
LayersCandle strip (same price) · Walls, flashes, orders, position · Header: spread, imbalance
updatesRedraw on every snapshot, trade or

Keeping the candle and the ladder in sync

The book, the and the candles reach the chart through separate calls, often from separate feeds. The ladder therefore keeps one price: the newest of the forming bar's close and the last real trade inside that bar's . The forming candle in the strip is drawn with that close, and the ladder's last row, the last- and the position P/L all use it. When the strip uses its own scale, the scale is chosen so the candle sits level with the ladder's last row, and a line joins the two.

One live price for the ladder and the candle stripchart.update(formingBar) →bar closechart.addTrades(trades) →last real tradesetOrderbookSnapshot(book)→ bids / asks, midLive price = whicheverchanged last (trades countonly inside the formingbar's period)Re-centre window on themid (band)Forming candle drawn withclose = live priceLadder "last" row and P/L atlive priceOwn-scale strip keeps thelive candle level with theladder rowConnector joins candle androw across the gap24512.024511.524511.024510.524510.0candle close, connector and the ladder's last row on one line
Three feeds, one live price: the candle close, the connector and the ladder's last row always line up.
ℹ
Note:The host's bar is not changed; only the of the forming candle uses the price. The nextchart.update() from your feed replaces it.

How data reaches the screen

How data reaches the screenYour app / broker feedChart APIEngine stores & cachesScreen (rAF)new Chart({ container, chartType })setData(series, bars)bars → data managerindex + boundssetChartTypeOptions(type, {...})sanitise against schemaclamp rangessetOrderbookSnapshot(book, { time })OrderbookModel + LiquidityHistoryrow gridaddTrades(trades)TradeTape (sorted)real trades winupdate(series, formingBar) — every tickrecompute forming barO(1)request redrawone framerender price action + overlays
The calls your code makes, what the engine stores, and when it draws. Redraws are coalesced into one animation frame.

Minimal implementation

The first above, as standalone code:

typescript
import { Chart } from '@quatick/quatick-charts';

const chart = new Chart({
  container: document.getElementById('chart')!,
  chartType: 'dom-ladder',
  theme: 'dark',
  renderer: 'canvas',
  showVolume: false,
});
const series = chart.addSeries({ type: 'candlestick' });
chart.setData(series.id, bars); // [{ time, open, high, low, close, volume }] — time in seconds

chart.setChartTypeOptions('dom-ladder', {
  columns: "bidOrders,bids,price,asks,askOrders,volume,delta",
  ladderWidthPx: 520
});

// Live: every tick updates the forming bar (a new time opens a new bar)
feed.onTick(bar => chart.update(series.id, bar));

// Depth and trades
feed.onBook(book => chart.setOrderbookSnapshot(book, { time: chartSeconds }));  // { bids: [[price, size]], asks: [[price, size]] }
feed.onTrades(trades => chart.addTrades(trades));  // [{ time, price, size, side: 'buy' | 'sell' }]

chart.setDomOrders([{ price: 24497, size: 5, side: 'buy' }, { price: 24504, size: 5, side: 'sell', label: 'TP' }]);
chart.setDomPosition({ price: 24498.5, size: 5 });

Quatick settings reference

Loading the settings list…

See also

Related articles

  • Absorption & Iceberg Map

    Charts / Chart Types / Volume Charts

    Hidden liquidity made visible: levels where more traded than the book showed, and levels that absorbed heavy flow without breaking.

  • Cumulative Delta (CVD)

    Charts / Chart Types / Volume Charts

    Candles of the running total of buy volume minus sell volume, with divergence detection against price.

  • Depth Footprint

    Charts / Chart Types / Volume Charts

    Each bar split in two: what traded at every price, and what was resting in the book at that price.

  • Volume Footprint

    Charts / Chart Types / Volume Charts

    A bid/ask volume histogram overlaid on each price bar, revealing who is buying and selling at every price level.

  • Advanced Order Book

    Trading / Order Book

    A live market-depth workspace: a stepped price ladder, a depth chart kept in sync with it, sixteen alternative views of the book, a trades bar and one-row…

  • Composite Profile

    Charts / Chart Types / Volume Charts

    Volume, time and resting liquidity at every price of a session, side by side, with three points of control and each row classified.

  • Liquidity Heatmap

    Charts / Chart Types / Volume Charts

    Resting order-book size at every price over time, drawn on the GPU, with executed trades as bubbles.

  • Order-Book Imbalance Candles

    Charts / Chart Types / Volume Charts

    Candles of how one-sided the resting book was, with what aggressive traders actually did on the same scale.

  • Orderflow Chart

    Charts / Chart Types / Volume Charts

    An enterprise-grade orderflow visualization combining footprint, CVD, depth ladder, whale detection, and time & sales.

Browse all knowledge base articles →