[{"data":1,"prerenderedAt":1774},["ShallowReactive",2],{"post:\u002Fblog\u002Ftrading-chart-with-depth-heatmap-guide":3,"blog-all-posts":1703},{"id":4,"title":5,"author":6,"body":7,"category":1688,"coverAlt":1689,"coverImage":32,"date":1690,"dateModified":1688,"description":1691,"draft":1692,"extension":1693,"faqs":1688,"meta":1694,"navigation":212,"ogImage":1695,"ogImageAlt":1688,"order":1688,"path":1696,"readTime":1697,"section":1688,"sectionOrder":1688,"seo":1698,"seoTitle":1699,"stem":1700,"tag":1701,"__hash__":1702},"content\u002Fblog\u002Ftrading-chart-with-depth-heatmap-guide.md","Trading Chart with Depth Heatmap: Complete Guide [2026]","mrD-Indicators",{"type":8,"value":9,"toc":1672},"minimark",[10,23,26,42,47,62,69,85,88,92,103,110,125,132,140,147,151,158,172,183,476,495,501,509,513,516,521,528,535,539,550,557,561,572,575,579,589,596,600,611,618,622,628,662,665,677,681,688,1549,1562,1566,1572,1586,1601,1607,1617,1621,1659,1669],[11,12,13,14,18,19,22],"p",{},"A traditional candlestick chart shows you ",[15,16,17],"strong",{},"where price went",". A trading chart with depth heatmap shows you ",[15,20,21],{},"where price is going to react"," — the resting limit orders, the institutional walls, the spoofing, the iceberg orders that traditional charts make invisible.",[11,24,25],{},"If you have ever wondered why a candle suddenly reverses at a price level that has no visible support, the answer is on the depth heatmap. This guide explains exactly what a depth heatmap is, how to read it, which tools render it inside a single canvas, and how to embed one in your own application in under 50 lines of code.",[11,27,28,33],{},[29,30],"img",{"alt":31,"src":32},"BTC\u002FUSDT trading chart with orderbook depth heatmap, footprint chart, liquidation heatmap, and large trade bubbles rendered in a single HTML5 canvas","\u002Fblog\u002Ftrading-chart-with-depth-heatmap-hero.png",[34,35,36,37,41],"em",{},"BTC\u002FUSDT — candlesticks with real-time orderbook depth heatmap, large trade bubbles, liquidation heatmap, and RSI signals — all in one canvas, rendered by the ",[38,39,40],"code",{},"kline-orderbook-chart"," native engine.",[43,44,46],"h2",{"id":45},"what-is-a-depth-heatmap-on-a-candlestick-chart","What is a depth heatmap on a candlestick chart",[11,48,49,50,53,54,57,58,61],{},"A ",[15,51,52],{},"depth heatmap"," is a colour-coded visualisation of the orderbook's resting limit orders, plotted on the same time and price axes as the candlestick chart. Each pixel maps to a ",[15,55,56],{},"(price level, time column)"," cell. The colour intensity at that cell represents the ",[15,59,60],{},"liquidity sitting at that price"," at that point in time.",[11,63,64,65,68],{},"Bright orange or red areas mean a large quantity of limit orders was resting at that price. Dark areas mean nothing was there. When you overlay this heatmap ",[15,66,67],{},"behind"," the candles, you suddenly see two things at once:",[70,71,72,79],"ol",{},[73,74,75,78],"li",{},[15,76,77],{},"Where price was"," — the candles (executed trades).",[73,80,81,84],{},[15,82,83],{},"Where the resting liquidity was"," — the heatmap (limit orders waiting to be hit).",[11,86,87],{},"The combination is the closest thing a screen trader can get to the institutional view of the market, which is why prop firms have paid thousands per month for legacy desktop platforms since the early 2010s.",[43,89,91],{"id":90},"why-traditional-charts-miss-95-of-market-activity","Why traditional charts miss 95% of market activity",[11,93,94,95,98,99,102],{},"A candlestick aggregates four numbers per bar: ",[15,96,97],{},"Open, High, Low, Close",". Optionally a fifth: ",[15,100,101],{},"Volume",". That is the entire information density of every charting library released between 1999 and 2020.",[11,104,105,106,109],{},"What the candle does ",[15,107,108],{},"not"," show:",[111,112,113,116,119,122],"ul",{},[73,114,115],{},"The 50 BTC limit-sell wall at $68,500 that has been sitting there for the last three hours.",[73,117,118],{},"The iceberg buyer at $66,800 quietly refreshing 5 BTC every minute.",[73,120,121],{},"The spoofed 200 BTC bid that vanished the moment price approached.",[73,123,124],{},"The thin liquidity zone between $67,200 and $67,800 where a single market order could move price 60 dollars.",[11,126,127,128,131],{},"All of this lives in the ",[15,129,130],{},"orderbook depth",", not in OHLCV. And until recently, the only way to see it was to either:",[111,133,134,137],{},[73,135,136],{},"Run a Windows-only desktop application built for institutional traders, or",[73,138,139],{},"Stare at a Level 2 ladder and try to remember what was there 30 seconds ago.",[11,141,142,143,146],{},"A depth heatmap solves both problems by ",[15,144,145],{},"persisting historical orderbook snapshots"," as a coloured raster behind the price chart. Now the iceberg refresh history is visible at a glance, and so is the wall that has been defending $68,500 for the last three hours.",[43,148,150],{"id":149},"how-a-depth-heatmap-is-built-the-matrix-model","How a depth heatmap is built (the matrix model)",[11,152,153,154,157],{},"Under the hood, a depth heatmap is a ",[15,155,156],{},"two-dimensional matrix"," indexed by:",[111,159,160,166],{},[73,161,162,165],{},[15,163,164],{},"Rows"," → price levels, evenly spaced (e.g. 200 rows × $5 = $1,000 of price range).",[73,167,168,171],{},[15,169,170],{},"Columns"," → time columns, one per bar (e.g. 500 columns × 1 minute = 500-minute window).",[11,173,174,175,178,179,182],{},"Every cell ",[38,176,177],{},"(row, col)"," holds a single floating-point number: the ",[15,180,181],{},"liquidity at that price during that time bucket",". The renderer maps the number to a colour through a palette (typically dark blue → cyan → yellow → orange → red), and draws the cell as a filled rectangle on the canvas.",[184,185,190],"pre",{"className":186,"code":187,"language":188,"meta":189,"style":189},"language-javascript shiki shiki-themes github-dark github-light","\u002F\u002F Conceptually, a heatmap is just a flat Float64Array.\n\u002F\u002F matrix[row * cols + col] = liquidity at (price_min + row * yStep, time_col)\n\nconst rows = 200      \u002F\u002F price levels\nconst cols = 500      \u002F\u002F time columns\nconst matrix = new Float64Array(rows * cols)\nconst yStep = 5       \u002F\u002F $5 per row\nconst priceMin = 60000\n\n\u002F\u002F Real-time update: a new orderbook snapshot arrives\nfunction onOrderbookSnapshot(snapshot, columnIdx) {\n  for (const { price, qty } of snapshot.bids.concat(snapshot.asks)) {\n    const row = Math.floor((price - priceMin) \u002F yStep)\n    if (row \u003C 0 || row >= rows) continue\n    matrix[row * cols + columnIdx] = qty\n  }\n}\n","javascript","",[38,191,192,201,207,214,234,250,277,293,306,311,317,342,379,411,441,464,470],{"__ignoreMap":189},[193,194,197],"span",{"class":195,"line":196},"line",1,[193,198,200],{"class":199},"si27w","\u002F\u002F Conceptually, a heatmap is just a flat Float64Array.\n",[193,202,204],{"class":195,"line":203},2,[193,205,206],{"class":199},"\u002F\u002F matrix[row * cols + col] = liquidity at (price_min + row * yStep, time_col)\n",[193,208,210],{"class":195,"line":209},3,[193,211,213],{"emptyLinePlaceholder":212},true,"\n",[193,215,217,221,225,228,231],{"class":195,"line":216},4,[193,218,220],{"class":219},"spKkM","const",[193,222,224],{"class":223},"sTU5a"," rows",[193,226,227],{"class":219}," =",[193,229,230],{"class":223}," 200",[193,232,233],{"class":199},"      \u002F\u002F price levels\n",[193,235,237,239,242,244,247],{"class":195,"line":236},5,[193,238,220],{"class":219},[193,240,241],{"class":223}," cols",[193,243,227],{"class":219},[193,245,246],{"class":223}," 500",[193,248,249],{"class":199},"      \u002F\u002F time columns\n",[193,251,253,255,258,260,263,267,271,274],{"class":195,"line":252},6,[193,254,220],{"class":219},[193,256,257],{"class":223}," matrix",[193,259,227],{"class":219},[193,261,262],{"class":219}," new",[193,264,266],{"class":265},"sqoU-"," Float64Array",[193,268,270],{"class":269},"shWlK","(rows ",[193,272,273],{"class":219},"*",[193,275,276],{"class":269}," cols)\n",[193,278,280,282,285,287,290],{"class":195,"line":279},7,[193,281,220],{"class":219},[193,283,284],{"class":223}," yStep",[193,286,227],{"class":219},[193,288,289],{"class":223}," 5",[193,291,292],{"class":199},"       \u002F\u002F $5 per row\n",[193,294,296,298,301,303],{"class":195,"line":295},8,[193,297,220],{"class":219},[193,299,300],{"class":223}," priceMin",[193,302,227],{"class":219},[193,304,305],{"class":223}," 60000\n",[193,307,309],{"class":195,"line":308},9,[193,310,213],{"emptyLinePlaceholder":212},[193,312,314],{"class":195,"line":313},10,[193,315,316],{"class":199},"\u002F\u002F Real-time update: a new orderbook snapshot arrives\n",[193,318,320,323,326,329,333,336,339],{"class":195,"line":319},11,[193,321,322],{"class":219},"function",[193,324,325],{"class":265}," onOrderbookSnapshot",[193,327,328],{"class":269},"(",[193,330,332],{"class":331},"sdxZB","snapshot",[193,334,335],{"class":269},", ",[193,337,338],{"class":331},"columnIdx",[193,340,341],{"class":269},") {\n",[193,343,345,348,351,353,356,359,361,364,367,370,373,376],{"class":195,"line":344},12,[193,346,347],{"class":219},"  for",[193,349,350],{"class":269}," (",[193,352,220],{"class":219},[193,354,355],{"class":269}," { ",[193,357,358],{"class":223},"price",[193,360,335],{"class":269},[193,362,363],{"class":223},"qty",[193,365,366],{"class":269}," } ",[193,368,369],{"class":219},"of",[193,371,372],{"class":269}," snapshot.bids.",[193,374,375],{"class":265},"concat",[193,377,378],{"class":269},"(snapshot.asks)) {\n",[193,380,382,385,388,390,393,396,399,402,405,408],{"class":195,"line":381},13,[193,383,384],{"class":219},"    const",[193,386,387],{"class":223}," row",[193,389,227],{"class":219},[193,391,392],{"class":269}," Math.",[193,394,395],{"class":265},"floor",[193,397,398],{"class":269},"((price ",[193,400,401],{"class":219},"-",[193,403,404],{"class":269}," priceMin) ",[193,406,407],{"class":219},"\u002F",[193,409,410],{"class":269}," yStep)\n",[193,412,414,417,420,423,426,429,432,435,438],{"class":195,"line":413},14,[193,415,416],{"class":219},"    if",[193,418,419],{"class":269}," (row ",[193,421,422],{"class":219},"\u003C",[193,424,425],{"class":223}," 0",[193,427,428],{"class":219}," ||",[193,430,431],{"class":269}," row ",[193,433,434],{"class":219},">=",[193,436,437],{"class":269}," rows) ",[193,439,440],{"class":219},"continue\n",[193,442,444,447,449,452,455,458,461],{"class":195,"line":443},15,[193,445,446],{"class":269},"    matrix[row ",[193,448,273],{"class":219},[193,450,451],{"class":269}," cols ",[193,453,454],{"class":219},"+",[193,456,457],{"class":269}," columnIdx] ",[193,459,460],{"class":219},"=",[193,462,463],{"class":269}," qty\n",[193,465,467],{"class":195,"line":466},16,[193,468,469],{"class":269},"  }\n",[193,471,473],{"class":195,"line":472},17,[193,474,475],{"class":269},"}\n",[11,477,478,479,482,483,486,487,490,491,494],{},"The performance bottleneck is the ",[15,480,481],{},"render",", not the data. A 200×500 matrix is 100,000 cells. Drawing 100,000 ",[38,484,485],{},"\u003Cdiv>","s would be impossible at 60 fps, which is why every serious depth heatmap library renders to a ",[38,488,489],{},"\u003Ccanvas>"," element with a single ",[38,492,493],{},"putImageData()"," call per frame.",[29,496],{"src":497,"alt":498,"loading":499,"style":500},"\u002Fvideo\u002Forderbook_heatmap.webp","Animated demo of a real-time orderbook depth heatmap streaming behind BTC\u002FUSDT candlesticks, showing resting walls forming and being pulled","lazy","width:100%;border-radius:8px;margin:24px 0;",[11,502,503],{},[34,504,505,506,508],{},"Live capture of ",[38,507,40],{}," streaming a Binance Futures depth stream. Watch the resting walls form, the spoofs flash and disappear, and the price reacting to liquidity gaps in real time.",[43,510,512],{"id":511},"reading-the-heatmap-five-patterns-you-can-spot-in-30-seconds","Reading the heatmap: five patterns you can spot in 30 seconds",[11,514,515],{},"The first time you look at a depth heatmap, the colours feel chaotic. After a few hours, you start seeing the same five patterns over and over. Here they are.",[517,518,520],"h3",{"id":519},"_1-resting-walls-supportresistance-built-in-real-time","1. Resting walls (support\u002Fresistance built in real time)",[11,522,523,524,527],{},"A horizontal ",[15,525,526],{},"bright stripe"," that persists across many columns means a large limit order has been sitting at that price for a long time. This is the strongest support\u002Fresistance signal a chart can give you: the market is literally telling you where someone is willing to absorb size.",[11,529,530,531,534],{},"When the stripe ",[15,532,533],{},"disappears"," mid-stream (the wall is pulled), it usually means whoever placed it is no longer defending that level, and price tends to break through within seconds. Pulling a wall is the most reliable \"breakout incoming\" signal in microstructure trading.",[517,536,538],{"id":537},"_2-spoofing-flashes","2. Spoofing flashes",[11,540,541,542,545,546,549],{},"A bright stripe that appears for ",[15,543,544],{},"less than 30 seconds"," and disappears before price reaches it is a ",[15,547,548],{},"spoof",". Spoofing is illegal in regulated markets but extremely common in crypto. The spoofer's goal is to scare retail into the opposite direction by faking a wall.",[11,551,552,553,556],{},"A trading chart with depth heatmap is the ",[15,554,555],{},"only"," tool that exposes spoofs without you sitting on the Level 2 ladder 24\u002F7. Once you have spotted three or four spoofs at the same price level, you have identified the spoofer's algorithm and can fade them.",[517,558,560],{"id":559},"_3-iceberg-refresh-patterns","3. Iceberg refresh patterns",[11,562,563,564,567,568,571],{},"An ",[15,565,566],{},"iceberg order"," is a large hidden order broken into small visible slices that refill as they execute. On a depth heatmap, this shows up as a ",[15,569,570],{},"horizontal dotted line"," at a single price level: every time the visible slice is consumed, a new slice appears, then is consumed, then appears, all in the same row.",[11,573,574],{},"If you see a dotted line at $66,800 lasting 20 minutes, there is a serious buyer at that price. Stops below $66,800 are about to get harvested, and the price is more likely than chance to bounce.",[517,576,578],{"id":577},"_4-liquidity-vacuum-zones","4. Liquidity vacuum zones",[11,580,49,581,584,585,588],{},[15,582,583],{},"dark band"," between two bright bands is a ",[15,586,587],{},"liquidity vacuum",": a price range with very few resting orders. When price enters a vacuum, it moves fast — a single market order is enough to drive it through, because there is nothing to absorb the flow.",[11,590,591,592,595],{},"The classic setup is \"wall at $68,500, vacuum from $67,200 to $68,000, wall at $67,000\". If price breaks $68,500, it will not stop until $67,000 (or whatever the next wall is). The chart literally shows you the ",[15,593,594],{},"path of least resistance"," before it happens.",[517,597,599],{"id":598},"_5-stacked-accumulation","5. Stacked accumulation",[11,601,602,603,606,607,610],{},"Multiple ",[15,604,605],{},"closely spaced bid stripes"," below the current price (or ask stripes above) indicate ",[15,608,609],{},"stacked accumulation"," — a buyer building a ladder of limit orders to defend a zone. This is typical of market makers or large discretionary traders trying to fill size without slipping the market.",[11,612,613,614,617],{},"Stacked accumulation is the strongest ",[15,615,616],{},"trend-continuation"," signal a depth heatmap gives. If the buyer keeps stacking even as price ticks down, you know the dip is being bought, not panicked.",[43,619,621],{"id":620},"tools-that-render-orderbook-depth-as-a-heatmap","Tools that render orderbook depth as a heatmap",[11,623,624,625,627],{},"Roughly four categories of tool can render a real depth heatmap, and most chart libraries you have heard of do ",[15,626,108],{}," belong in any of them:",[111,629,630,636,642,648],{},[73,631,632,635],{},[15,633,634],{},"Windows-only desktop applications"," built for professional traders. Powerful, expensive, native-code. Not embeddable in a web product.",[73,637,638,641],{},[15,639,640],{},"Multi-OS desktop platforms"," targeting professional traders. Similar profile to the Windows-only tools, broader OS support, similar price band.",[73,643,644,647],{},[15,645,646],{},"Web SaaS products"," that sit between desktop and library — you pay a monthly fee and use the vendor's hosted chart through an iframe or a hosted app. Convenient; you do not own the integration.",[73,649,650,653,654,657,658,661],{},[15,651,652],{},"JavaScript \u002F TypeScript libraries"," that ship as an npm package and render inside your own product. This is the only category that lets you build a trading app ",[34,655,656],{},"around"," the chart instead of ",[34,659,660],{},"into"," somebody else's product.",[11,663,664],{},"Within the JavaScript library category, the technical requirements are sharp: real-time append on a 100,000-cell heatmap matrix without DOM thrash, candles overlaid on the same canvas, synchronised pan\u002Fzoom\u002Fcrosshair, indicator extensibility, and a trade-tape ingestion path so footprint cells render inline once the customer asks. If a library cannot do those things, the demo looks great and the production deploy breaks the moment a real WebSocket starts pumping data.",[11,666,667,668,670,671,676],{},"We are the team behind ",[38,669,40],{},", an npm package built specifically for this slot. The library ships a 380 KB gzipped native engine doing the rendering, with a framework-agnostic JavaScript API on top. It is one possible answer; the buyer's guide below tells you how to evaluate every candidate honestly. See ",[672,673,675],"a",{"href":674},"\u002Fblog\u002Forderbook-heatmap-chart-library-comparison-2026","Choosing an Orderbook Heatmap Chart Library: A Practical Buyer's Guide for 2026"," for the 14-dimension rubric you can run on any shortlist.",[43,678,680],{"id":679},"a-50-line-implementation-you-can-copy-paste","A 50-line implementation you can copy-paste",[11,682,683,684,687],{},"The full code below renders a candlestick chart with an orderbook heatmap behind it, using real Binance Futures depth data. Save it as ",[38,685,686],{},"index.html",", open in a browser, you are done.",[184,689,693],{"className":690,"code":691,"language":692,"meta":189,"style":189},"language-html shiki shiki-themes github-dark github-light","\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n  \u003Ctitle>BTC\u002FUSDT depth heatmap demo\u003C\u002Ftitle>\n  \u003Cstyle>html,body,canvas{margin:0;width:100%;height:100vh;background:#0B0E11}\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ccanvas id=\"chart\">\u003C\u002Fcanvas>\n  \u003Cscript type=\"module\">\n    import { createChartBridge } from 'https:\u002F\u002Fesm.sh\u002Fkline-orderbook-chart'\n\n    const canvas = document.getElementById('chart')\n    const chart = await createChartBridge(canvas, {\n      \u002F\u002F Omit licenseKey to run the 30-day trial with a watermark.\n      \u002F\u002F licenseKey: 'YOUR_TRIAL_KEY',\n      theme: 'dark',\n    })\n\n    \u002F\u002F 1) Load historical klines for the candle layer.\n    const r = await fetch('https:\u002F\u002Fapi.binance.com\u002Fapi\u002Fv3\u002Fklines?symbol=BTCUSDT&interval=5m&limit=500')\n    const klines = (await r.json()).map(k => ({\n      time: k[0] \u002F 1000, open: +k[1], high: +k[2], low: +k[3], close: +k[4], volume: +k[5],\n    }))\n    chart.setKlines(klines)\n\n    \u002F\u002F 2) Allocate the heatmap matrix: 200 price rows × 500 time columns.\n    const rows = 200, cols = klines.length\n    const priceMin = Math.min(...klines.map(k => k.low))\n    const priceMax = Math.max(...klines.map(k => k.high))\n    const yStep = (priceMax - priceMin) \u002F rows\n    chart.setHeatmap({\n      rows, cols, priceMin, yStep,\n      matrix: new Float64Array(rows * cols),\n    })\n\n    \u002F\u002F 3) Stream real-time orderbook depth from Binance Futures.\n    const ws = new WebSocket('wss:\u002F\u002Ffstream.binance.com\u002Fws\u002Fbtcusdt@depth20@100ms')\n    ws.onmessage = ev => {\n      const { b: bids, a: asks } = JSON.parse(ev.data)\n      const colIdx = cols - 1\n      for (const [p, q] of bids.concat(asks)) {\n        const row = Math.floor((+p - priceMin) \u002F yStep)\n        if (row >= 0 && row \u003C rows) chart.updateHeatmapCell(row, colIdx, +q)\n      }\n    }\n\n    \u002F\u002F 4) Start the render loop. 60 fps, GPU-accelerated, ~3% CPU.\n    chart.start()\n  \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html",[38,694,695,710,718,727,742,820,829,837,859,876,890,894,917,935,940,945,956,961,966,972,994,1032,1102,1108,1120,1125,1131,1155,1188,1220,1241,1252,1258,1276,1281,1286,1292,1314,1333,1375,1392,1424,1454,1487,1493,1499,1504,1510,1521,1531,1540],{"__ignoreMap":189},[193,696,697,700,704,707],{"class":195,"line":196},[193,698,699],{"class":269},"\u003C!",[193,701,703],{"class":702},"shQVT","DOCTYPE",[193,705,706],{"class":265}," html",[193,708,709],{"class":269},">\n",[193,711,712,714,716],{"class":195,"line":203},[193,713,422],{"class":269},[193,715,692],{"class":702},[193,717,709],{"class":269},[193,719,720,722,725],{"class":195,"line":209},[193,721,422],{"class":269},[193,723,724],{"class":702},"head",[193,726,709],{"class":269},[193,728,729,732,735,738,740],{"class":195,"line":216},[193,730,731],{"class":269},"  \u003C",[193,733,734],{"class":702},"title",[193,736,737],{"class":269},">BTC\u002FUSDT depth heatmap demo\u003C\u002F",[193,739,734],{"class":702},[193,741,709],{"class":269},[193,743,744,746,749,752,754,757,760,762,765,768,771,774,777,780,783,785,788,791,793,796,798,800,803,805,808,810,813,816,818],{"class":195,"line":236},[193,745,731],{"class":269},[193,747,748],{"class":702},"style",[193,750,751],{"class":269},">",[193,753,692],{"class":702},[193,755,756],{"class":269},",",[193,758,759],{"class":702},"body",[193,761,756],{"class":269},[193,763,764],{"class":702},"canvas",[193,766,767],{"class":269},"{",[193,769,770],{"class":223},"margin",[193,772,773],{"class":269},":",[193,775,776],{"class":223},"0",[193,778,779],{"class":269},";",[193,781,782],{"class":223},"width",[193,784,773],{"class":269},[193,786,787],{"class":223},"100",[193,789,790],{"class":219},"%",[193,792,779],{"class":269},[193,794,795],{"class":223},"height",[193,797,773],{"class":269},[193,799,787],{"class":223},[193,801,802],{"class":219},"vh",[193,804,779],{"class":269},[193,806,807],{"class":223},"background",[193,809,773],{"class":269},[193,811,812],{"class":223},"#0B0E11",[193,814,815],{"class":269},"}\u003C\u002F",[193,817,748],{"class":702},[193,819,709],{"class":269},[193,821,822,825,827],{"class":195,"line":252},[193,823,824],{"class":269},"\u003C\u002F",[193,826,724],{"class":702},[193,828,709],{"class":269},[193,830,831,833,835],{"class":195,"line":279},[193,832,422],{"class":269},[193,834,759],{"class":702},[193,836,709],{"class":269},[193,838,839,841,843,846,848,852,855,857],{"class":195,"line":295},[193,840,731],{"class":269},[193,842,764],{"class":702},[193,844,845],{"class":265}," id",[193,847,460],{"class":269},[193,849,851],{"class":850},"skb7c","\"chart\"",[193,853,854],{"class":269},">\u003C\u002F",[193,856,764],{"class":702},[193,858,709],{"class":269},[193,860,861,863,866,869,871,874],{"class":195,"line":308},[193,862,731],{"class":269},[193,864,865],{"class":702},"script",[193,867,868],{"class":265}," type",[193,870,460],{"class":269},[193,872,873],{"class":850},"\"module\"",[193,875,709],{"class":269},[193,877,878,881,884,887],{"class":195,"line":313},[193,879,880],{"class":219},"    import",[193,882,883],{"class":269}," { createChartBridge } ",[193,885,886],{"class":219},"from",[193,888,889],{"class":850}," 'https:\u002F\u002Fesm.sh\u002Fkline-orderbook-chart'\n",[193,891,892],{"class":195,"line":319},[193,893,213],{"emptyLinePlaceholder":212},[193,895,896,898,901,903,906,909,911,914],{"class":195,"line":344},[193,897,384],{"class":219},[193,899,900],{"class":223}," canvas",[193,902,227],{"class":219},[193,904,905],{"class":269}," document.",[193,907,908],{"class":265},"getElementById",[193,910,328],{"class":269},[193,912,913],{"class":850},"'chart'",[193,915,916],{"class":269},")\n",[193,918,919,921,924,926,929,932],{"class":195,"line":381},[193,920,384],{"class":219},[193,922,923],{"class":223}," chart",[193,925,227],{"class":219},[193,927,928],{"class":219}," await",[193,930,931],{"class":265}," createChartBridge",[193,933,934],{"class":269},"(canvas, {\n",[193,936,937],{"class":195,"line":413},[193,938,939],{"class":199},"      \u002F\u002F Omit licenseKey to run the 30-day trial with a watermark.\n",[193,941,942],{"class":195,"line":443},[193,943,944],{"class":199},"      \u002F\u002F licenseKey: 'YOUR_TRIAL_KEY',\n",[193,946,947,950,953],{"class":195,"line":466},[193,948,949],{"class":269},"      theme: ",[193,951,952],{"class":850},"'dark'",[193,954,955],{"class":269},",\n",[193,957,958],{"class":195,"line":472},[193,959,960],{"class":269},"    })\n",[193,962,964],{"class":195,"line":963},18,[193,965,213],{"emptyLinePlaceholder":212},[193,967,969],{"class":195,"line":968},19,[193,970,971],{"class":199},"    \u002F\u002F 1) Load historical klines for the candle layer.\n",[193,973,975,977,980,982,984,987,989,992],{"class":195,"line":974},20,[193,976,384],{"class":219},[193,978,979],{"class":223}," r",[193,981,227],{"class":219},[193,983,928],{"class":219},[193,985,986],{"class":265}," fetch",[193,988,328],{"class":269},[193,990,991],{"class":850},"'https:\u002F\u002Fapi.binance.com\u002Fapi\u002Fv3\u002Fklines?symbol=BTCUSDT&interval=5m&limit=500'",[193,993,916],{"class":269},[193,995,997,999,1002,1004,1006,1009,1012,1015,1018,1021,1023,1026,1029],{"class":195,"line":996},21,[193,998,384],{"class":219},[193,1000,1001],{"class":223}," klines",[193,1003,227],{"class":219},[193,1005,350],{"class":269},[193,1007,1008],{"class":219},"await",[193,1010,1011],{"class":269}," r.",[193,1013,1014],{"class":265},"json",[193,1016,1017],{"class":269},"()).",[193,1019,1020],{"class":265},"map",[193,1022,328],{"class":269},[193,1024,1025],{"class":331},"k",[193,1027,1028],{"class":219}," =>",[193,1030,1031],{"class":269}," ({\n",[193,1033,1035,1038,1040,1043,1045,1048,1051,1053,1056,1059,1062,1064,1066,1069,1072,1074,1076,1079,1082,1084,1086,1089,1092,1094,1096,1099],{"class":195,"line":1034},22,[193,1036,1037],{"class":269},"      time: k[",[193,1039,776],{"class":223},[193,1041,1042],{"class":269},"] ",[193,1044,407],{"class":219},[193,1046,1047],{"class":223}," 1000",[193,1049,1050],{"class":269},", open: ",[193,1052,454],{"class":219},[193,1054,1055],{"class":269},"k[",[193,1057,1058],{"class":223},"1",[193,1060,1061],{"class":269},"], high: ",[193,1063,454],{"class":219},[193,1065,1055],{"class":269},[193,1067,1068],{"class":223},"2",[193,1070,1071],{"class":269},"], low: ",[193,1073,454],{"class":219},[193,1075,1055],{"class":269},[193,1077,1078],{"class":223},"3",[193,1080,1081],{"class":269},"], close: ",[193,1083,454],{"class":219},[193,1085,1055],{"class":269},[193,1087,1088],{"class":223},"4",[193,1090,1091],{"class":269},"], volume: ",[193,1093,454],{"class":219},[193,1095,1055],{"class":269},[193,1097,1098],{"class":223},"5",[193,1100,1101],{"class":269},"],\n",[193,1103,1105],{"class":195,"line":1104},23,[193,1106,1107],{"class":269},"    }))\n",[193,1109,1111,1114,1117],{"class":195,"line":1110},24,[193,1112,1113],{"class":269},"    chart.",[193,1115,1116],{"class":265},"setKlines",[193,1118,1119],{"class":269},"(klines)\n",[193,1121,1123],{"class":195,"line":1122},25,[193,1124,213],{"emptyLinePlaceholder":212},[193,1126,1128],{"class":195,"line":1127},26,[193,1129,1130],{"class":199},"    \u002F\u002F 2) Allocate the heatmap matrix: 200 price rows × 500 time columns.\n",[193,1132,1134,1136,1138,1140,1142,1144,1147,1149,1152],{"class":195,"line":1133},27,[193,1135,384],{"class":219},[193,1137,224],{"class":223},[193,1139,227],{"class":219},[193,1141,230],{"class":223},[193,1143,335],{"class":269},[193,1145,1146],{"class":223},"cols",[193,1148,227],{"class":219},[193,1150,1151],{"class":269}," klines.",[193,1153,1154],{"class":223},"length\n",[193,1156,1158,1160,1162,1164,1166,1169,1171,1174,1177,1179,1181,1183,1185],{"class":195,"line":1157},28,[193,1159,384],{"class":219},[193,1161,300],{"class":223},[193,1163,227],{"class":219},[193,1165,392],{"class":269},[193,1167,1168],{"class":265},"min",[193,1170,328],{"class":269},[193,1172,1173],{"class":219},"...",[193,1175,1176],{"class":269},"klines.",[193,1178,1020],{"class":265},[193,1180,328],{"class":269},[193,1182,1025],{"class":331},[193,1184,1028],{"class":219},[193,1186,1187],{"class":269}," k.low))\n",[193,1189,1191,1193,1196,1198,1200,1203,1205,1207,1209,1211,1213,1215,1217],{"class":195,"line":1190},29,[193,1192,384],{"class":219},[193,1194,1195],{"class":223}," priceMax",[193,1197,227],{"class":219},[193,1199,392],{"class":269},[193,1201,1202],{"class":265},"max",[193,1204,328],{"class":269},[193,1206,1173],{"class":219},[193,1208,1176],{"class":269},[193,1210,1020],{"class":265},[193,1212,328],{"class":269},[193,1214,1025],{"class":331},[193,1216,1028],{"class":219},[193,1218,1219],{"class":269}," k.high))\n",[193,1221,1223,1225,1227,1229,1232,1234,1236,1238],{"class":195,"line":1222},30,[193,1224,384],{"class":219},[193,1226,284],{"class":223},[193,1228,227],{"class":219},[193,1230,1231],{"class":269}," (priceMax ",[193,1233,401],{"class":219},[193,1235,404],{"class":269},[193,1237,407],{"class":219},[193,1239,1240],{"class":269}," rows\n",[193,1242,1244,1246,1249],{"class":195,"line":1243},31,[193,1245,1113],{"class":269},[193,1247,1248],{"class":265},"setHeatmap",[193,1250,1251],{"class":269},"({\n",[193,1253,1255],{"class":195,"line":1254},32,[193,1256,1257],{"class":269},"      rows, cols, priceMin, yStep,\n",[193,1259,1261,1264,1267,1269,1271,1273],{"class":195,"line":1260},33,[193,1262,1263],{"class":269},"      matrix: ",[193,1265,1266],{"class":219},"new",[193,1268,266],{"class":265},[193,1270,270],{"class":269},[193,1272,273],{"class":219},[193,1274,1275],{"class":269}," cols),\n",[193,1277,1279],{"class":195,"line":1278},34,[193,1280,960],{"class":269},[193,1282,1284],{"class":195,"line":1283},35,[193,1285,213],{"emptyLinePlaceholder":212},[193,1287,1289],{"class":195,"line":1288},36,[193,1290,1291],{"class":199},"    \u002F\u002F 3) Stream real-time orderbook depth from Binance Futures.\n",[193,1293,1295,1297,1300,1302,1304,1307,1309,1312],{"class":195,"line":1294},37,[193,1296,384],{"class":219},[193,1298,1299],{"class":223}," ws",[193,1301,227],{"class":219},[193,1303,262],{"class":219},[193,1305,1306],{"class":265}," WebSocket",[193,1308,328],{"class":269},[193,1310,1311],{"class":850},"'wss:\u002F\u002Ffstream.binance.com\u002Fws\u002Fbtcusdt@depth20@100ms'",[193,1313,916],{"class":269},[193,1315,1317,1320,1323,1325,1328,1330],{"class":195,"line":1316},38,[193,1318,1319],{"class":269},"    ws.",[193,1321,1322],{"class":265},"onmessage",[193,1324,227],{"class":219},[193,1326,1327],{"class":331}," ev",[193,1329,1028],{"class":219},[193,1331,1332],{"class":269}," {\n",[193,1334,1336,1339,1341,1344,1347,1350,1352,1354,1356,1359,1361,1363,1366,1369,1372],{"class":195,"line":1335},39,[193,1337,1338],{"class":219},"      const",[193,1340,355],{"class":269},[193,1342,1343],{"class":331},"b",[193,1345,1346],{"class":269},": ",[193,1348,1349],{"class":223},"bids",[193,1351,335],{"class":269},[193,1353,672],{"class":331},[193,1355,1346],{"class":269},[193,1357,1358],{"class":223},"asks",[193,1360,366],{"class":269},[193,1362,460],{"class":219},[193,1364,1365],{"class":223}," JSON",[193,1367,1368],{"class":269},".",[193,1370,1371],{"class":265},"parse",[193,1373,1374],{"class":269},"(ev.data)\n",[193,1376,1378,1380,1383,1385,1387,1389],{"class":195,"line":1377},40,[193,1379,1338],{"class":219},[193,1381,1382],{"class":223}," colIdx",[193,1384,227],{"class":219},[193,1386,451],{"class":269},[193,1388,401],{"class":219},[193,1390,1391],{"class":223}," 1\n",[193,1393,1395,1398,1400,1402,1405,1407,1409,1412,1414,1416,1419,1421],{"class":195,"line":1394},41,[193,1396,1397],{"class":219},"      for",[193,1399,350],{"class":269},[193,1401,220],{"class":219},[193,1403,1404],{"class":269}," [",[193,1406,11],{"class":223},[193,1408,335],{"class":269},[193,1410,1411],{"class":223},"q",[193,1413,1042],{"class":269},[193,1415,369],{"class":219},[193,1417,1418],{"class":269}," bids.",[193,1420,375],{"class":265},[193,1422,1423],{"class":269},"(asks)) {\n",[193,1425,1427,1430,1432,1434,1436,1438,1441,1443,1446,1448,1450,1452],{"class":195,"line":1426},42,[193,1428,1429],{"class":219},"        const",[193,1431,387],{"class":223},[193,1433,227],{"class":219},[193,1435,392],{"class":269},[193,1437,395],{"class":265},[193,1439,1440],{"class":269},"((",[193,1442,454],{"class":219},[193,1444,1445],{"class":269},"p ",[193,1447,401],{"class":219},[193,1449,404],{"class":269},[193,1451,407],{"class":219},[193,1453,410],{"class":269},[193,1455,1457,1460,1462,1464,1466,1469,1471,1473,1476,1479,1482,1484],{"class":195,"line":1456},43,[193,1458,1459],{"class":219},"        if",[193,1461,419],{"class":269},[193,1463,434],{"class":219},[193,1465,425],{"class":223},[193,1467,1468],{"class":219}," &&",[193,1470,431],{"class":269},[193,1472,422],{"class":219},[193,1474,1475],{"class":269}," rows) chart.",[193,1477,1478],{"class":265},"updateHeatmapCell",[193,1480,1481],{"class":269},"(row, colIdx, ",[193,1483,454],{"class":219},[193,1485,1486],{"class":269},"q)\n",[193,1488,1490],{"class":195,"line":1489},44,[193,1491,1492],{"class":269},"      }\n",[193,1494,1496],{"class":195,"line":1495},45,[193,1497,1498],{"class":269},"    }\n",[193,1500,1502],{"class":195,"line":1501},46,[193,1503,213],{"emptyLinePlaceholder":212},[193,1505,1507],{"class":195,"line":1506},47,[193,1508,1509],{"class":199},"    \u002F\u002F 4) Start the render loop. 60 fps, GPU-accelerated, ~3% CPU.\n",[193,1511,1513,1515,1518],{"class":195,"line":1512},48,[193,1514,1113],{"class":269},[193,1516,1517],{"class":265},"start",[193,1519,1520],{"class":269},"()\n",[193,1522,1524,1527,1529],{"class":195,"line":1523},49,[193,1525,1526],{"class":269},"  \u003C\u002F",[193,1528,865],{"class":702},[193,1530,709],{"class":269},[193,1532,1534,1536,1538],{"class":195,"line":1533},50,[193,1535,824],{"class":269},[193,1537,759],{"class":702},[193,1539,709],{"class":269},[193,1541,1543,1545,1547],{"class":195,"line":1542},51,[193,1544,824],{"class":269},[193,1546,692],{"class":702},[193,1548,709],{"class":269},[11,1550,1551,1552,1556,1557,1561],{},"Open the HTML file, and within five seconds you have a fully functional trading chart with a real-time orderbook depth heatmap. No npm install, no build step, no React or Vue. The same chart works inside any framework — see the ",[672,1553,1555],{"href":1554},"\u002Fblog\u002Freact-orderbook-heatmap-chart-tutorial","React integration guide"," and the ",[672,1558,1560],{"href":1559},"\u002Fblog\u002Fvue-3-orderbook-heatmap-chart-tutorial","Vue 3 integration guide"," for production setups.",[43,1563,1565],{"id":1564},"common-questions","Common questions",[11,1567,1568,1571],{},[15,1569,1570],{},"Does this work for spot, futures, or options?"," Spot and futures, on any exchange that exposes a depth stream. Options orderbooks are sparse and the heatmap is less useful — most options trading uses chains rather than depth visualisation.",[11,1573,1574,1577,1578,1581,1582,1585],{},[15,1575,1576],{},"What is the difference between a depth heatmap and a market depth chart?"," A market depth chart (sometimes called a \"depth chart\" or \"DOM chart\") shows the ",[15,1579,1580],{},"current"," orderbook as a single snapshot — usually a cumulative quantity curve at this exact moment. A depth heatmap shows ",[15,1583,1584],{},"historical"," depth over time. The depth chart answers \"what is the orderbook right now\". The heatmap answers \"how has the orderbook evolved over the last hour\".",[11,1587,1588,1591,1592,1594,1595,1368],{},[15,1589,1590],{},"Is this the same as a liquidation heatmap?"," No. A liquidation heatmap estimates where leveraged positions will get force-closed, based on aggregated open interest and entry-price distributions. A depth heatmap shows resting limit orders. The two complement each other — ",[38,1593,40],{}," renders both as separate layers in the same canvas. For how to trade the liquidation layer, see ",[15,1596,1597],{},[672,1598,1600],{"href":1599},"\u002Fblog\u002Fliquidation-heatmap-trend-trading-guide","Liquidation Heatmap: A Research-Led Guide to Trend Trading",[11,1602,1603,1606],{},[15,1604,1605],{},"Does the engine work on mobile?"," Yes. It runs in every modern mobile browser (iOS Safari 15+, Android Chrome 90+). The render loop holds 60 fps on a 2020 iPhone SE in our benchmarks. Touch gestures (pinch, two-finger pan) are wired up by default.",[11,1608,1609,1612,1613,1616],{},[15,1610,1611],{},"What about latency?"," The heatmap update path from ",[38,1614,1615],{},"WebSocket message → matrix write → canvas paint"," is under 2 ms on a modern laptop. The bottleneck for real-time depth is the exchange's WebSocket throughput, not the renderer.",[43,1618,1620],{"id":1619},"what-to-read-next","What to read next",[111,1622,1623,1632,1641,1650],{},[73,1624,1625,1631],{},[15,1626,1627],{},[672,1628,1630],{"href":1629},"\u002Fblog\u002Fhow-to-read-orderbook-heatmap-trading","How to Read Orderbook Heatmap for Trading"," — deeper walkthrough of the five patterns above with real BTC\u002FUSDT screenshots and trade entries.",[73,1633,1634,1640],{},[15,1635,1636],{},[672,1637,1639],{"href":1638},"\u002Fblog\u002Fhow-to-read-dom-ladder-trading","How to Read the DOM Ladder"," — the live, price-by-price companion to the heatmap: resting size, aggressive volume and per-level delta in real time.",[73,1642,1643,1649],{},[15,1644,1645],{},[672,1646,1648],{"href":1647},"\u002Fblog\u002Ffootprint-chart-vs-candlestick-chart","Footprint Chart vs Candlestick Chart"," — why footprint adds a third dimension on top of OHLCV and how it pairs with the depth heatmap.",[73,1651,1652,1658],{},[15,1653,1654],{},[672,1655,1657],{"href":1656},"\u002Fblog\u002Fbuilding-trading-terminal-kline-orderbook-chart","Building a Trading Terminal with kline-orderbook-chart"," — full React + WebSocket + indicator panel example.",[11,1660,1661,1662,1668],{},"If you want to skip ahead and just try the library, the trial is 14 days, no credit card, all features unlocked. The ",[672,1663,1667],{"href":1664,"rel":1665},"https:\u002F\u002Fapp.mrd-indicators.com\u002Fcharting-library\u002Fpricing",[1666],"nofollow","pricing page"," has the plan matrix.",[748,1670,1671],{},"html pre.shiki code .si27w, html code.shiki .si27w{--shiki-default:#6A737D;--shiki-light:#6A737D}html pre.shiki code .spKkM, html code.shiki .spKkM{--shiki-default:#F97583;--shiki-light:#D73A49}html pre.shiki code .sTU5a, html code.shiki .sTU5a{--shiki-default:#79B8FF;--shiki-light:#005CC5}html pre.shiki code .sqoU-, html code.shiki .sqoU-{--shiki-default:#B392F0;--shiki-light:#6F42C1}html pre.shiki code .shWlK, html code.shiki .shWlK{--shiki-default:#E1E4E8;--shiki-light:#24292E}html pre.shiki code .sdxZB, html code.shiki .sdxZB{--shiki-default:#FFAB70;--shiki-light:#E36209}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html pre.shiki code .shQVT, html code.shiki .shQVT{--shiki-default:#85E89D;--shiki-light:#22863A}html pre.shiki code .skb7c, html code.shiki .skb7c{--shiki-default:#9ECBFF;--shiki-light:#032F62}",{"title":189,"searchDepth":203,"depth":203,"links":1673},[1674,1675,1676,1677,1684,1685,1686,1687],{"id":45,"depth":203,"text":46},{"id":90,"depth":203,"text":91},{"id":149,"depth":203,"text":150},{"id":511,"depth":203,"text":512,"children":1678},[1679,1680,1681,1682,1683],{"id":519,"depth":209,"text":520},{"id":537,"depth":209,"text":538},{"id":559,"depth":209,"text":560},{"id":577,"depth":209,"text":578},{"id":598,"depth":209,"text":599},{"id":620,"depth":203,"text":621},{"id":679,"depth":203,"text":680},{"id":1564,"depth":203,"text":1565},{"id":1619,"depth":203,"text":1620},null,"BTC\u002FUSDT chart with orderbook depth heatmap, footprint, liquidation overlay, and RSI","2026-05-15","Learn how a trading chart with depth heatmap visualises real-time orderbook liquidity behind candlesticks. Patterns to read, tools that support it, and a 50-line JavaScript implementation.",false,"md",{},"https:\u002F\u002Fmrd-indicators.com\u002Fmrd-indicators-cover-v2.png","\u002Fblog\u002Ftrading-chart-with-depth-heatmap-guide","12 min read",{"title":5,"description":1691},"Trading Chart with Depth Heatmap — Complete Guide [2026] | mrD-Indicators","blog\u002Ftrading-chart-with-depth-heatmap-guide","ORDER FLOW","qFIw4hQLbVu_-klbpLSmZ3jpUlrJEPgKWZsX7o_tva0",[1704,1711,1718,1727,1734,1735,1742,1749,1756,1763,1769],{"path":1638,"title":1705,"description":1706,"tag":1701,"date":1707,"readTime":1708,"coverImage":1709,"coverAlt":1710},"How to Read the DOM Ladder: An Order-Flow Trading Guide","The DOM ladder (depth of market) shows resting bid\u002Fask size, aggressive buy and sell volume, and per-level delta live. Learn to read walls and absorption.","2026-06-03","13 min read","\u002Fblog\u002Fdom-ladder-hero.png","Real-time DOM ladder with green resting bid bars below price, red resting ask bars above, aggressive buy and sell volume columns and a signed delta column",{"path":1599,"title":1712,"description":1713,"tag":1701,"date":1714,"readTime":1715,"coverImage":1716,"coverAlt":1717},"Liquidation Heatmap + RSI: Trading Long-Term Trend Waves","Combine the liquidation heatmap with RSI to ride long-term trend waves: forced-deleveraging mechanics, an RSI regime filter, and a swing framework across 500+ Binance altcoin pairs.","2026-06-02","16 min read","\u002Fblog\u002Fliq\u002Fliquidation-heatmap-cover.png","Liquidation heatmap and RSI on a BTC\u002FUSDT chart in a downtrend, bright clusters marking estimated force-liquidation zones above and below price",{"path":1719,"title":1720,"description":1721,"tag":1722,"date":1723,"readTime":1724,"coverImage":1725,"coverAlt":1726},"\u002Fblog\u002Frsi-momentum-value-and-structure-guide","RSI as a Momentum Instrument: Value and Structure","What RSI really measures: momentum, not overbought\u002Foversold. RSI momentum value (Cardwell range rules), structure (Baeyens), and why momentum leads price.","RSI","2026-05-31","28 min read","\u002Fblog\u002Frsi\u002Frsi-cover.png","RSI panel showing the momentum line, bull and bear range zones, and a multi-timeframe RSI table — the value and structure dimensions of RSI momentum",{"path":1728,"title":1729,"description":1730,"tag":1701,"date":1731,"readTime":1697,"coverImage":1732,"coverAlt":1733},"\u002Fblog\u002Ftrading-with-cvd-profile","Trading with CVD Profile: A Practical Guide","How to read a CVD Profile and trade four repeatable setups — trapped traders, distribution top, accumulation bottom, and absorption resolution — with clear entry rules.","2026-05-24","\u002Fblog\u002Fcvd-profile-og.png","BTC\u002FUSDT chart with CVD Profile — buy vs sell volume at each price, POC highlight, and delta share for order-flow trading",{"path":1696,"title":5,"description":1691,"tag":1701,"date":1690,"readTime":1697,"coverImage":32,"coverAlt":1689},{"path":1629,"title":1736,"description":1737,"tag":1701,"date":1738,"readTime":1739,"coverImage":1740,"coverAlt":1741},"How to Read an Orderbook Heatmap for Trading: 5 Patterns That Print Money","Five orderbook heatmap patterns every trader should recognise on sight: resting walls, spoofing flashes, iceberg refresh, liquidity vacuums, and stacked accumulation. With real BTC\u002FUSDT examples.","2026-05-12","10 min read","\u002Fblog\u002Forderbook-heatmap-patterns.png","Orderbook heatmap on a candlestick chart, with bright bid stripes below and ask stripes above price",{"path":674,"title":675,"description":1743,"tag":1744,"date":1745,"readTime":1746,"coverImage":1747,"coverAlt":1748},"A practical buyer's guide for picking a JavaScript orderbook heatmap chart library. The technical requirements that actually matter, the questions to ask, the build-it-yourself cost estimate, and a checklist you can run on any candidate.","CHARTING","2026-05-10","11 min read","\u002Fblog\u002Ffootprint-chart-advanced.png","Footprint chart with bid\u002Fask volume at every price level, delta coloring, imbalance detection, and POC highlighting",{"path":1750,"title":1751,"description":1752,"tag":1753,"date":1754,"readTime":1739,"coverImage":1747,"coverAlt":1755},"\u002Fblog\u002Fwhat-is-a-footprint-chart-complete-guide","What Is a Footprint Chart? The Complete Guide for 2026","A footprint chart shows trade volume at every price inside a candle — bid vs ask, delta, and POC. The complete beginner's guide with the three display modes, how aggressor classification works, and how to start reading order flow.","FOOTPRINT","2026-05-08","Footprint chart with bid volume on left, ask volume on right, delta coloring, and POC highlight",{"path":1757,"title":1758,"description":1759,"tag":1753,"date":1760,"readTime":1708,"coverImage":1761,"coverAlt":1762},"\u002Fblog\u002Fhow-to-read-footprint-chart-patterns","How to Read a Footprint Chart: 8 Patterns Every Trader Must Know","Learn how to read a footprint chart in practice. Eight order-flow patterns — absorption, stacked imbalance, delta divergence, exhaustion, unfinished auction, HVN, POC rotation, and supportive-vs-fading delta — with examples and trader interpretation.","2026-05-06","\u002Fblog\u002Ffootprint-chart-settings.png","Footprint chart with delta-colored cells, POC highlight, and stacked imbalance markers",{"path":1764,"title":1765,"description":1766,"tag":1753,"date":1767,"readTime":1746,"coverImage":1747,"coverAlt":1768},"\u002Fblog\u002Fstacked-imbalances-footprint-chart-guide","Stacked Imbalances on a Footprint Chart: Setup, Reading, and Trading","Stacked imbalances are the most-watched footprint signal. Learn the diagonal vs horizontal detection methods, how to calibrate ratio and min rows, what bullish and bearish stacks mean, and how traders use them in practice.","2026-05-04","Footprint chart showing stacked imbalance zones with bracket markers and tinted cells",{"path":1647,"title":1770,"description":1771,"tag":1753,"date":1772,"readTime":1739,"coverImage":32,"coverAlt":1773},"Footprint Chart vs Candlestick Chart: Why You Need Both","A head-to-head comparison of footprint and candlestick charts. What each one shows, what each one hides, the data each requires, and how to combine them in one workflow. With concrete examples of when the footprint changes your read.","2026-05-02","Trading chart with candlesticks, depth heatmap, and footprint cells visible inline",1780669143764]