Each bar split in two: what traded at every price, and what was resting in the book at that price.
What the chart shows
A footprint tells you how much traded at each price inside a bar. It does not tell you whether that was a lot or a little for that price: 400 contracts can a thin level or off a 5,000-lot wall. The depth footprint puts the order book beside the , row by row, so every price reads as traded against resting.
Menu
Chart type → → Depth footprint
Engine type
depth-footprint
Combines
Bid / ask volume per price (setFootprintData or the estimate) + recorded order-book snapshots
Renderer
Canvas 2D; bars cached so only the forming bar is rebuilt
Unique to this chart
Consumed and held , and the share of resting liquidity each bar used
Anatomy of a bar
One bar. Left: traded volume per price. Right: the book at bar open. The spine between them is the candle.
Part
What it is
How to read it
Traded lane
Volume traded at each price, split sell (red) | buy (green).
The usual footprint information, as bars.
Book lane
Resting size at each price: in cyan, asks in pink.
Where liquidity was waiting. Extra above and below show walls the bar did not reach.
Candle spine
The bar's open, high, low and close between the lanes.
Keeps price action visible.
Consumed
Orange edge where traded ≥ resting.
The level was used up: price could move through it.
Held
Green outline at a bar extreme where resting ≥ 2.5 × traded.
The book stopped the bar there.
Used %
Above each bar: traded (capped at resting) / resting over the that traded.
High = the bar swept the book; low = it barely touched it.
Hatched book lane
Bars from before depth was recorded.
Only the traded side is known for these bars.
How the chart is built, step by step
1
Choose the rows
sit on a price grid. In automatic the row size is picked from the zoom so rows are about Target row height tall, never smaller than the book .
2
Fill the traded lane
Each bar's bid / ask volume per price comes from chart.setFootprintData() when supplied, otherwise from the same estimate the footprint chart uses.
3
Find the book for the bar
With Book taken at: Bar open, the chart uses the last book snapshot at the bar's start time; with , the last one before the next bar.
4
Fill the book lane
Book levels are summed into the same . Bars without a snapshot get a hatched lane.
5
Mark the rows
Consumed where traded ≥ resting; held at the bar's top or bottom traded row where resting ≥ Held when resting ≥ × traded; and the bar's usage .
Bar open shows the book the bar had to trade into; bar close shows what it left behind.
Reading the chart, step by step
Four row patterns.
1
Start with usage
Bars with high usage swept the book and usually moved price; bars with low usage traded against deep liquidity and usually stalled.
2
Look at the extremes
A held at a bar's low with a resting bid shows support by liquidity. A consumed at the high shows buyers lifted everything on offer.
3
Find untouched walls
book above or below the traded range are walls not yet tested. The next bars will show whether they hold or get .
4
Compare bar to bar
Walls that move away as price approaches (switch to to see them) are being ; walls that stay and get consumed are real.
Setting it up, step by step
1
Use live depth and a short timeframe
The book lane needs recorded snapshots; 15 s to 1 min bars give enough bars with depth after a few minutes.
2
Select the chart type
Chart type menu → → Depth footprint, then open the gear.
3
Zoom in
Each bar needs at least Plain candles below column pixels (44 by default); below that, plain candles are drawn.
4
Supply bid / ask volume
For exact traded lanes, feed setFootprintData and updateFootprintBar from the trade tape.
Common setups
Scalping futures
1- , book at bar open, shared scale, numbers on. Watch consumed ticks at the high or low.
Wall watching
Book at , own scale, 6 extra around each bar to keep nearby walls in view.
Delta vs depth
Traded lane as delta tint: one-sided into a deep book that held is absorption.
Limitations
!
Caution:The book lane is one snapshot per bar. Liquidity and removed during the bar does not appear; use the absorption map or the liquidity heatmap for what happened inside the bar.
Bars from before the chart started recording depth have a hatched book lane.
Without supplied bid / ask volume the traded lane is estimated from .
The book shows only the levels the broker sends.
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
Left lane: what traded at each price. Right lane: what was resting there when the bar opened. Orange ticks mark rows where trading used up the book.
Loading the Quatick chart engine…
depth-footprint · 0 bars · last — · 0 trades · drag to pan, wheel to zoom
How the engine draws Depth footprint
Inputs, computation, renderer and overlay layers of the Depth footprint chart type in the native engine.
Stage
What happens
in
Bid / ask per price → setFootprintData()
setOrderbookSnapshot(book)
row grid
Traded sell | buy per row
Resting book per row at bar open / close
Step 4
Consumed, held, liquidity used %
Canvas 2D
Layers
Candle spine · Consumed ticks, held marks · Used % header
updates
Only bars whose changed are rebuilt (footprint cache)
How data reaches the screen
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:'depth-footprint',
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// Real bid / ask volume per price, keyed by bar time
chart.setFootprintData({[bar.time]:[{ price, bid, ask },...]});// Live: every tick updates the forming bar (a new time opens a new bar)
feed.onTick(bar => chart.update(series.id, bar));
feed.onLevels((time, levels)=> chart.updateFootprintBar(time, levels));// 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' }]