Liquidity Heatmap

A candle chart shows where trades happened. It does not show the limit orders that were waiting in the book, which is where the market had to go through or turn back. The liquidity heatmap records the order book many times per second and paints the size resting at each price as colour: dark for little size, bright for a lot. Over time, each large order becomes a horizontal band, and you can see when it was placed, how long it stayed and whether it was traded through or pulled.

Price is drawn on top as a line or candles, with the best bid and best ask as trails and trades as bubbles sized by volume. This style is known from tools such as Bookmap.

1. 1
   Receive snapshots

   The terminal sends every order-book update to the chart with chart.setOrderbookSnapshot(), stamped in chart time so columns line up with candles.
2. 2
   Bin into price rows

   Each level is placed in a price row on a fixed grid. The row size is the book tick, detected from the first snapshot, so rows do not shift when the view moves.
3. 3
   Bin into time columns

   Snapshots are grouped into columns of Column width seconds. Within a column the latest snapshot wins, because resting size is a state, not a flow. Columns older than Keep history are dropped.
4. 4
   Fit the visible window

   For the visible time and price range, columns and rows are packed into a small texture: one texel per column and row, merged when there are more than the screen can show. Merging keeps the largest size, so a wall stays visible when you zoom out. Red holds bid intensity, green holds ask intensity.
5. 5
   Normalise

   The reference size is the Saturation percentile of the visible non-zero sizes. Each size is divided by it and clipped at 1, so a single huge order does not darken everything else.
6. 6
   Colour on the GPU

   A fragment shader applies Gamma, removes values below Hide below, and looks up the colour in a 256-entry palette texture. A bloom pass then spreads light from bright cells by Bloom glow. Changing these settings does not re-upload any data.
7. 7
   Draw the overlays

   Price, best bid / ask trails, trade bubbles, the current book profile, large-order labels and the status line are drawn on top in Canvas 2D.

• Heat (both sides) colours bids and asks with one palette. The best bid / ask trails tell the sides apart.
• Bid / ask hues uses the bid and ask colours, so the side of each band is obvious.
• Bids only or Asks only hides one side, for example to study only the support below price.

1. 1
   Check the status line

   Note how long depth has been recorded and whether trades come from the tape or are inferred. A heatmap recorded for two minutes says little about older levels.
2. 2
   Find the bright bands near price

   These are the large resting orders price must deal with next. The current book profile at the right edge shows their size now.
3. 3
   Watch price arrive at a band

   If bubbles appear and the band stays, the order is being filled and is holding price. If the band disappears before price reaches it, the order was pulled.
4. 4
   Look for absorption

   Many large sell bubbles at a bid band, with the band staying bright and price not falling, means a buyer is absorbing the selling.
5. 5
   Follow the book

   Bands that move with price (stepping down in a decline) show liquidity providers repositioning. The direction of the shift often leads price.
6. 6
   Confirm with trades

   A break through a band with large bubbles and a full buy ring (or empty for selling) is a genuine break; a break on small bubbles after the band was pulled is weaker.

1. 1
   Choose a market with live depth

   The broker connection must stream order-book depth for the symbol. Delta Exchange also streams trades with aggressor side; other brokers infer trades from tick volume.
2. 2
   Select the chart type

   Chart type menu → Order flow → Liquidity heatmap. Recording starts now; history fills in from the right.
3. 3
   Use a short timeframe

   Candles of 1 minute or less line up with the heat columns. The heatmap is drawn on the chart's time axis.
4. 4
   Open the settings

   Click the gear to the left of the name. Try the presets first: Bookmap, Bid / ask split, Thermal, Deep ocean, Clean, Large orders only.
5. 5
   Tune the contrast

   If the map is mostly dark, lower the saturation percentile or gamma. If it is a blur, raise gamma and Hide below.
6. 6
   Tune the trades

   Raise Hide trades below to keep only meaningful prints; raise Merge trades within if bubbles overlap.
7. 7
   Keep the chart open

   Depth is recorded only while this chart is open with a depth-based chart type. Switching symbol clears it. Changing Column width also clears it.

Feeding the chart from code

// Every depth update: [price, size] pairs, best first
chart.setOrderbookSnapshot(
  { bids: [[24510.0, 120], [24509.5, 340]], asks: [[24510.5, 90], [24511.0, 410]] },
  { time: chartTimeSeconds },
);

// Real trades with aggressor side (turns off inference from ticks)
chart.addTrades([{ time: chartTimeSeconds, price: 24510.5, size: 25, side: 'buy' }]);

// On symbol change
chart.clearMarketDepth();

// For a status UI
const { snapshots, firstTime, trades, realTrades } = chart.getMarketDepthInfo();

• Depth is limited to the levels the broker sends (often 5 to 20 per side). Prices beyond them are empty, not thin.
• Visible orders are not all orders: icebergs show only their visible part, and some venues hide size.
• Without trades from the tape, bubbles are inferred from tick volume and the side is estimated with the tick rule.
• Without WebGL2 the Canvas 2D fallback is used: same colours, no bloom, slower on large windows.

Loading the settings list…