Appearance
Personalize your experience
DOM Ladder
Charts / Chart Types / Volume ChartsDepth 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.
dom-ladderLive 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.
Anatomy of the ladder
| Part | What it is | How to read it |
|---|---|---|
| Price column | One row per price, grouped by Book ticks per row. | run from high (top) to low (bottom), on the same scale as the price . |
| Bid column | Size resting to buy at each price below the market. | A depth bar grows to the left with the size. |
| Ask column | Size resting to sell at each price above the market. | A depth bar grows to the with the size. |
| Best bid / best ask | The bid and lowest ask, outlined and optionally glowing. | The prices where a market order first. |
| Spread boundary | Line between the best ask and the best bid. | The header shows the spread size. |
| Last traded price | Highlighted 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 column | Buy minus sell volume traded at each price. | Positive: buyers lifted offers there. Negative: sellers hit bids. |
| Last column | Volume traded at each price in the last few seconds. | Shows where trading is happening now. |
| Position line | Your 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. |
| Header | Column 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 strip | Recent 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
- 1Receive the bookEach order-book update reaches the chart through
chart.setOrderbookSnapshot(). The terminal does this automatically for brokers that stream depth. - 2Group into rowsLevels are grouped into of Book ticks per row × the book . Sizes in the same row are .
- 3Place the windowWith 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 .
- 4Count traded volumefrom 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.
- 5Fall back to barsBefore 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.
- 6Draw, 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 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
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
- 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
- 1Read the spread and imbalanceA 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.
- 2Watch the best bid and askWhen 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.
- 3Find the wallsHighlighted levels can stop price. Watch the flashes: an orange flash on a wall as price approaches means it is being .
- 4Read traded deltapositive delta at a price below the market means buyers in there. Such prices often hold on a retest.
- 5Check the last columnConcentrated recent volume at one price, without price moving, signals absorption at that level.
- 6Check your ordersYour 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
- 1Choose a symbol with depthThe broker must stream the order book. Delta Exchange (and other crypto symbols) also stream with aggressor side; elsewhere trades are inferred from volume.
- 2Select the chart typeChart type menu → → DOM ladder. Until the first snapshot arrives the header shows Waiting for order book.
- 3Open the settingsClick the gear to the left of the name.
- 4Set the row sizeKeep 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.
- 5Pick the columnsStart with Orders · book · volume · delta. Use Book only for the narrowest ladder.
- 6Set the volume windowfor context, Last N minutes for short-term activity.
- 7Size the layoutSet Ladder and Row height so the ladder shows enough , then the candle strip the rest.
Feeding the ladder from code
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 = flatCommon 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
- 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.
How the engine draws DOM ladder
| Stage | What happens |
|---|---|
| in | setOrderbookSnapshot(book) |
| addTrades() | |
| chart.update(bar) | |
| setDomOrders / setDomPosition | |
| Group book into | |
| Re-centre on mid () | |
| price = newest of and trade | |
| Step 4 | Volume / delta per row from the tape |
| Canvas 2D | |
| Layers | Candle strip (same price) · Walls, flashes, orders, position · Header: spread, imbalance |
| updates | Redraw 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.
chart.update() from your feed replaces it.How data reaches the screen
Minimal implementation
The first above, as standalone code:
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
Related to DOM Ladder
- 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.