[{"data":1,"prerenderedAt":862},["ShallowReactive",2],{"post:\u002Fblog\u002Fkline-chart-orderbook-heatmap-library":3,"blog-all-posts":738},{"id":4,"title":5,"author":6,"body":7,"category":709,"coverAlt":710,"coverImage":39,"date":711,"dateModified":711,"description":712,"draft":713,"extension":714,"faqs":715,"meta":728,"navigation":171,"ogImage":729,"ogImageAlt":730,"order":709,"path":731,"readTime":732,"section":709,"sectionOrder":709,"seo":733,"seoTitle":734,"stem":735,"tag":736,"__hash__":737},"content\u002Fblog\u002Fkline-chart-orderbook-heatmap-library.md","Kline Chart With Orderbook Heatmap: A Library Guide","Tape Delta",{"type":8,"value":9,"toc":698},"minimark",[10,19,33,44,49,52,79,86,107,114,118,143,267,285,289,292,334,341,350,354,357,459,462,478,481,489,500,509,529,533,536,562,565,569,609,613,682,685,694],[11,12,13,14,18],"p",{},"If you have searched \"kline chart with orderbook heatmap\", \"candlestick depth heatmap library\", or \"orderbook heatmap JavaScript\", you have hit the same wall everyone does: plenty of libraries draw candles, plenty draw a heatmap somewhere on the page, and almost none draw ",[15,16,17],"strong",{},"resting orderbook liquidity behind the candles in one synchronized canvas",". This guide shows you how to do exactly that — install, first chart, the heatmap layer, real-time streaming — and how the same engine runs on both the web and native desktop.",[11,20,21,22,32],{},"We build ",[23,24,28],"a",{"href":25,"rel":26},"https:\u002F\u002Fgithub.com\u002Ftapedelta\u002Fkline-orderbook-chart",[27],"nofollow",[29,30,31],"code",{},"kline-orderbook-chart",", so the code samples use it. The concepts (one canvas, O(rows) append, command-buffer rendering) apply to any library you evaluate — bring your own candidate and hold it to the same bar.",[11,34,35,40],{},[36,37],"img",{"alt":38,"src":39},"BTCUSDT kline chart with a real-time orderbook depth heatmap behind the candles, resting-liquidity bands mapped by price over time, plus an RSI Premium subplot","\u002Fblog\u002Fkline-heatmap\u002Fbtcusdt-orderbook-heatmap-chart.png",[41,42,43],"em",{},"A live BTCUSDT chart: candles in front, orderbook depth heatmap behind, one canvas, one axis pair.",[45,46,48],"h2",{"id":47},"what-kline-orderbook-heatmap-actually-means","What \"kline + orderbook heatmap\" actually means",[11,50,51],{},"Two views, one plane:",[53,54,55,66],"ul",{},[56,57,58,61,62,65],"li",{},[15,59,60],{},"Kline (candlesticks)"," — OHLC per bar: what price ",[41,63,64],{},"did",".",[56,67,68,71,72,75,76,65],{},[15,69,70],{},"Orderbook heatmap"," — a 2D raster of ",[41,73,74],{},"resting"," limit-order liquidity: time on X, price on Y, each cell colored by resting size. Bright bands are large walls of liquidity; dim areas are thin. This is what price ",[41,77,78],{},"has to trade through",[11,80,81,82,85],{},"The hard part is not drawing either one. It is drawing them ",[15,83,84],{},"together"," so that:",[53,87,88,95,98,101,104],{},[56,89,90,91,94],{},"there is a single ",[29,92,93],{},"\u003Ccanvas>"," element,",[56,96,97],{},"the heatmap is a colored raster occupying the price\u002Ftime plane,",[56,99,100],{},"candles render on top, transparent in their negative space so the heatmap shows through,",[56,102,103],{},"pan, zoom, scroll, crosshair, and the time axis stay locked between both layers,",[56,105,106],{},"the frame budget holds at 60 fps with a ~200×500 heatmap matrix plus a thousand candles.",[11,108,109,110,113],{},"If two views sit in two DOM boxes, that is a ",[41,111,112],{},"layout",", not a chart. The moment the trader pans, the layers ghost and lag. One canvas, one render frame, or it is not solving the problem.",[45,115,117],{"id":116},"install-and-render-your-first-candles","Install and render your first candles",[119,120,125],"pre",{"className":121,"code":122,"language":123,"meta":124,"style":124},"language-bash shiki shiki-themes github-dark github-light","npm install kline-orderbook-chart\n","bash","",[29,126,127],{"__ignoreMap":124},[128,129,132,136,140],"span",{"class":130,"line":131},"line",1,[128,133,135],{"class":134},"sqoU-","npm",[128,137,139],{"class":138},"skb7c"," install",[128,141,142],{"class":138}," kline-orderbook-chart\n",[119,144,148],{"className":145,"code":146,"language":147,"meta":124,"style":124},"language-javascript shiki shiki-themes github-dark github-light","import { createChartBridge, prefetchEngine } from 'kline-orderbook-chart'\n\n\u002F\u002F Warm the engine while your data request is in flight (optional, faster first paint).\nprefetchEngine()\n\nconst chart = await createChartBridge(canvas, {\n  licenseKey: 'YOUR_LICENSE_TOKEN',\n})\n\n\u002F\u002F timestamps in seconds; each array is one column of OHLCV.\nchart.setKlines(timestamps, open, high, low, close, volume)\nchart.start()\n","javascript",[29,149,150,166,173,180,189,194,216,228,234,239,245,257],{"__ignoreMap":124},[128,151,152,156,160,163],{"class":130,"line":131},[128,153,155],{"class":154},"spKkM","import",[128,157,159],{"class":158},"shWlK"," { createChartBridge, prefetchEngine } ",[128,161,162],{"class":154},"from",[128,164,165],{"class":138}," 'kline-orderbook-chart'\n",[128,167,169],{"class":130,"line":168},2,[128,170,172],{"emptyLinePlaceholder":171},true,"\n",[128,174,176],{"class":130,"line":175},3,[128,177,179],{"class":178},"si27w","\u002F\u002F Warm the engine while your data request is in flight (optional, faster first paint).\n",[128,181,183,186],{"class":130,"line":182},4,[128,184,185],{"class":134},"prefetchEngine",[128,187,188],{"class":158},"()\n",[128,190,192],{"class":130,"line":191},5,[128,193,172],{"emptyLinePlaceholder":171},[128,195,197,200,204,207,210,213],{"class":130,"line":196},6,[128,198,199],{"class":154},"const",[128,201,203],{"class":202},"sTU5a"," chart",[128,205,206],{"class":154}," =",[128,208,209],{"class":154}," await",[128,211,212],{"class":134}," createChartBridge",[128,214,215],{"class":158},"(canvas, {\n",[128,217,219,222,225],{"class":130,"line":218},7,[128,220,221],{"class":158},"  licenseKey: ",[128,223,224],{"class":138},"'YOUR_LICENSE_TOKEN'",[128,226,227],{"class":158},",\n",[128,229,231],{"class":130,"line":230},8,[128,232,233],{"class":158},"})\n",[128,235,237],{"class":130,"line":236},9,[128,238,172],{"emptyLinePlaceholder":171},[128,240,242],{"class":130,"line":241},10,[128,243,244],{"class":178},"\u002F\u002F timestamps in seconds; each array is one column of OHLCV.\n",[128,246,248,251,254],{"class":130,"line":247},11,[128,249,250],{"class":158},"chart.",[128,252,253],{"class":134},"setKlines",[128,255,256],{"class":158},"(timestamps, open, high, low, close, volume)\n",[128,258,260,262,265],{"class":130,"line":259},12,[128,261,250],{"class":158},[128,263,264],{"class":134},"start",[128,266,188],{"class":158},[11,268,269,270,273,274,276,277,280,281,284],{},"That is a full candlestick chart. ",[29,271,272],{},"createChartBridge"," returns the chart instance; ",[29,275,253],{}," hands it columnar OHLCV; ",[29,278,279],{},"start()"," begins the render loop. Call ",[29,282,283],{},"chart.destroy()"," on unmount to free the engine.",[45,286,288],{"id":287},"add-the-orderbook-heatmap","Add the orderbook heatmap",[11,290,291],{},"The heatmap is a flat matrix of resting sizes plus the geometry that maps it onto the price\u002Ftime plane:",[119,293,295],{"className":145,"code":294,"language":147,"meta":124,"style":124},"\u002F\u002F matrix: Float32Array of length ROWS * COLS (row-major), each cell = resting size.\n\u002F\u002F xStart\u002FxStep: time of the first column + seconds per column.\n\u002F\u002F yStart\u002FyStep: price of the first row + price per row.\nchart.setHeatmap(matrix, ROWS, COLS, xStart, xStep, yStart, yStep)\n",[29,296,297,302,307,312],{"__ignoreMap":124},[128,298,299],{"class":130,"line":131},[128,300,301],{"class":178},"\u002F\u002F matrix: Float32Array of length ROWS * COLS (row-major), each cell = resting size.\n",[128,303,304],{"class":130,"line":168},[128,305,306],{"class":178},"\u002F\u002F xStart\u002FxStep: time of the first column + seconds per column.\n",[128,308,309],{"class":130,"line":175},[128,310,311],{"class":178},"\u002F\u002F yStart\u002FyStep: price of the first row + price per row.\n",[128,313,314,316,319,322,325,328,331],{"class":130,"line":182},[128,315,250],{"class":158},[128,317,318],{"class":134},"setHeatmap",[128,320,321],{"class":158},"(matrix, ",[128,323,324],{"class":202},"ROWS",[128,326,327],{"class":158},", ",[128,329,330],{"class":202},"COLS",[128,332,333],{"class":158},", xStart, xStep, yStart, yStep)\n",[11,335,336,337,340],{},"That is the entire heatmap API. The engine buckets the matrix into the current viewport, interpolates the palette, and paints it ",[41,338,339],{},"behind"," the candles in the same frame. Bright cells are large resting walls; the candles you already loaded now sit in front of the liquidity they are trading into.",[11,342,343,347],{},[36,344],{"alt":345,"src":346},"Close-up of an orderbook depth heatmap behind candlesticks: bright amber bands mark large resting liquidity walls, deep blue marks thin liquidity, candles pressing into a wall","\u002Fblog\u002Fkline-heatmap\u002Forderbook-heatmap-liquidity-walls.png",[41,348,349],{},"Zoomed in: candles pressing into a bright resting-liquidity wall — the setup you cannot see on a bare candle chart.",[45,351,353],{"id":352},"stream-it-in-real-time","Stream it in real time",[11,355,356],{},"A live chart takes an orderbook snapshot (or delta) every ~100 ms and a trade tape continuously. Feed both without re-rendering the world:",[119,358,360],{"className":145,"code":359,"language":147,"meta":124,"style":124},"\u002F\u002F New\u002Fclosing bar from your kline socket:\nsocket.onKline((k) => {\n  chart.appendKline(k.ts, k.open, k.high, k.low, k.close, k.volume)\n})\n\n\u002F\u002F New orderbook column from your depth socket:\ndepthSocket.onSnapshot((snap) => {\n  \u002F\u002F Build the latest column into your rolling matrix, then hand it back.\n  chart.setHeatmap(matrix, ROWS, COLS, xStart, xStep, yStart, yStep)\n})\n",[29,361,362,367,391,402,406,410,415,434,439,455],{"__ignoreMap":124},[128,363,364],{"class":130,"line":131},[128,365,366],{"class":178},"\u002F\u002F New\u002Fclosing bar from your kline socket:\n",[128,368,369,372,375,378,382,385,388],{"class":130,"line":168},[128,370,371],{"class":158},"socket.",[128,373,374],{"class":134},"onKline",[128,376,377],{"class":158},"((",[128,379,381],{"class":380},"sdxZB","k",[128,383,384],{"class":158},") ",[128,386,387],{"class":154},"=>",[128,389,390],{"class":158}," {\n",[128,392,393,396,399],{"class":130,"line":175},[128,394,395],{"class":158},"  chart.",[128,397,398],{"class":134},"appendKline",[128,400,401],{"class":158},"(k.ts, k.open, k.high, k.low, k.close, k.volume)\n",[128,403,404],{"class":130,"line":182},[128,405,233],{"class":158},[128,407,408],{"class":130,"line":191},[128,409,172],{"emptyLinePlaceholder":171},[128,411,412],{"class":130,"line":196},[128,413,414],{"class":178},"\u002F\u002F New orderbook column from your depth socket:\n",[128,416,417,420,423,425,428,430,432],{"class":130,"line":218},[128,418,419],{"class":158},"depthSocket.",[128,421,422],{"class":134},"onSnapshot",[128,424,377],{"class":158},[128,426,427],{"class":380},"snap",[128,429,384],{"class":158},[128,431,387],{"class":154},[128,433,390],{"class":158},[128,435,436],{"class":130,"line":230},[128,437,438],{"class":178},"  \u002F\u002F Build the latest column into your rolling matrix, then hand it back.\n",[128,440,441,443,445,447,449,451,453],{"class":130,"line":236},[128,442,395],{"class":158},[128,444,318],{"class":134},[128,446,321],{"class":158},[128,448,324],{"class":202},[128,450,327],{"class":158},[128,452,330],{"class":202},[128,454,333],{"class":158},[128,456,457],{"class":130,"line":241},[128,458,233],{"class":158},[11,460,461],{},"Two properties make this hold up under a fast tape:",[53,463,464,472],{},[56,465,466,471],{},[15,467,468,470],{},[29,469,398],{}," is O(1) amortised"," — a new bar does not re-aggregate history.",[56,473,474,477],{},[15,475,476],{},"A heatmap column costs the rows it touches",", not the whole matrix — appending is cheap even at 10 Hz.",[11,479,480],{},"The render loop batches all of this into animation frames, so incoming messages never trigger a synchronous repaint. That is the difference between a demo with static data and a chart a trader can actually watch during a fast move.",[45,482,484,485,488],{"id":483},"one-engine-two-targets-web-and-native","One engine, two targets: web ",[41,486,487],{},"and"," native",[11,490,491,492,495,496,499],{},"Here is the part most libraries cannot claim: ",[15,493,494],{},"the same engine runs on the web and inside a native desktop app."," The core computes a renderer-agnostic ",[41,497,498],{},"command buffer"," every frame — an abstract list of \"fill this rect, stroke this line, draw this text\". On the web, a thin layer dispatches that buffer to a canvas. In a native Rust app, you dispatch the identical buffer through your own painter.",[11,501,502,506],{},[36,503],{"alt":504,"src":505},"One engine, two targets: a browser window and a native desktop window rendering the identical candlestick and heatmap chart, fed by a single shared engine core","\u002Fblog\u002Fgpui\u002Fweb-native-one-engine.png",[41,507,508],{},"Identical command stream, two front-ends: a browser canvas and a native window.",[11,510,511,512,517,518,522,523,65],{},"A ready-to-read ",[23,513,516],{"href":514,"rel":515},"https:\u002F\u002Fgithub.com\u002Fzed-industries\u002Fzed",[27],"GPUI"," adapter ships as a reference, so a Rust\u002F",[23,519,516],{"href":520,"rel":521},"https:\u002F\u002Fwww.gpui.rs\u002F",[27]," desktop app can embed the exact chart you shipped on the web — same candles, same heatmap, same numbers. If you are building a native trading terminal, read the companion post: ",[15,524,525],{},[23,526,528],{"href":527},"\u002Fblog\u002Fgpui-rust-charting-library-gex-heatmap","Building a Native GPUI Chart in Rust: GEX Gamma Heatmap From One Engine",[45,530,532],{"id":531},"beyond-the-heatmap","Beyond the heatmap",[11,534,535],{},"Resting liquidity is one layer. Teams that want it usually want the rest of the order-flow stack, and it is in the same engine:",[53,537,538,544,550,556],{},[56,539,540,543],{},[15,541,542],{},"Footprint cells"," — executed bid×ask volume inside each candle, with POC, delta, and stacked-imbalance detection.",[56,545,546,549],{},[15,547,548],{},"Liquidation heatmap"," — an overlay of liquidation clusters.",[56,551,552,555],{},[15,553,554],{},"18+ indicators"," — VRVP, CVD, TPO, RSI, MACD, Open Interest, Funding, and more, in shared subplots.",[56,557,558,561],{},[15,559,560],{},"Custom indicators"," — a scripting language so non-developers can build their own without forking your dependency.",[11,563,564],{},"No plugin store to vet, no version skew between the core and a footprint add-on. If it ships, it works.",[45,566,568],{"id":567},"common-pitfalls","Common pitfalls",[53,570,571,581,587,597],{},[56,572,573,576,577,580],{},[15,574,575],{},"Two canvases \"aligned\" by CSS."," The instant the user pans, the layers drift by a frame and ghost. The heatmap and candles must be one canvas on one render frame — check this in a vendor's ",[41,578,579],{},"pan"," demo, not a screenshot.",[56,582,583,586],{},[15,584,585],{},"Re-sending the whole matrix on every tick."," If a library re-uploads the full matrix per snapshot, it dies at 10 Hz. Confirm the append cost is O(rows touched).",[56,588,589,592,593,596],{},[15,590,591],{},"DOM-per-cell heatmaps."," A 200×500 matrix is 100,000 cells; as DOM nodes or ",[29,594,595],{},"\u003Crect>","s the browser collapses on the first pan. The heatmap must be a raster (canvas\u002Fnative), not the DOM.",[56,598,599,605,606,608],{},[15,600,601,602,65],{},"Forgetting ",[29,603,604],{},"destroy()"," The engine holds a memory buffer; not calling ",[29,607,283],{}," on unmount leaks it across route changes. Wire it into your framework's teardown.",[45,610,612],{"id":611},"where-to-go-next","Where to go next",[53,614,615,624,633,642,650,669],{},[56,616,617,623],{},[15,618,619],{},[23,620,622],{"href":621},"\u002Fblog\u002Forderbook-heatmap-chart-library-comparison-2026","Choosing an Orderbook Heatmap Chart Library: A Buyer's Guide"," — the rubric to score every candidate, including ours.",[56,625,626,632],{},[15,627,628],{},[23,629,631],{"href":630},"\u002Fblog\u002Ftrading-chart-with-depth-heatmap-guide","Trading Chart With Depth Heatmap: A Practical Guide"," — what the view looks like in production.",[56,634,635,641],{},[15,636,637],{},[23,638,640],{"href":639},"\u002Fblog\u002Fhow-to-read-orderbook-heatmap-trading","How to Read an Orderbook Heatmap — 5 Patterns"," — the trader-facing companion.",[56,643,644,649],{},[15,645,646],{},[23,647,648],{"href":527},"Building a Native GPUI Chart in Rust"," — the same engine, native.",[56,651,652,655,656,660,661,660,665],{},[15,653,654],{},"Docs:"," ",[23,657,659],{"href":658},"\u002Fdocs\u002Fcharting-library\u002Fintroduction","Charting Library"," · ",[23,662,664],{"href":663},"\u002Fdocs\u002Fcharting-library\u002Fgetting-started","Getting Started",[23,666,668],{"href":667},"\u002Fdocs\u002Fcharting-library\u002Forderbook-heatmap","Orderbook Heatmap",[56,670,671,655,674,660,678],{},[15,672,673],{},"Code:",[23,675,677],{"href":25,"rel":676},[27],"GitHub — kline-orderbook-chart",[23,679,135],{"href":680,"rel":681},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fkline-orderbook-chart",[27],[683,684],"hr",{},[11,686,687],{},[41,688,689,690,693],{},"Built with ",[23,691,31],{"href":25,"rel":692},[27]," — free for development, commercial licences for production. This article is education for developers, not financial advice. Trading involves risk.",[695,696,697],"style",{},"html pre.shiki code .sqoU-, html code.shiki .sqoU-{--shiki-default:#B392F0;--shiki-light:#6F42C1}html pre.shiki code .skb7c, html code.shiki .skb7c{--shiki-default:#9ECBFF;--shiki-light:#032F62}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 .spKkM, html code.shiki .spKkM{--shiki-default:#F97583;--shiki-light:#D73A49}html pre.shiki code .shWlK, html code.shiki .shWlK{--shiki-default:#E1E4E8;--shiki-light:#24292E}html pre.shiki code .si27w, html code.shiki .si27w{--shiki-default:#6A737D;--shiki-light:#6A737D}html pre.shiki code .sTU5a, html code.shiki .sTU5a{--shiki-default:#79B8FF;--shiki-light:#005CC5}html pre.shiki code .sdxZB, html code.shiki .sdxZB{--shiki-default:#FFAB70;--shiki-light:#E36209}",{"title":124,"searchDepth":168,"depth":168,"links":699},[700,701,702,703,704,706,707,708],{"id":47,"depth":168,"text":48},{"id":116,"depth":168,"text":117},{"id":287,"depth":168,"text":288},{"id":352,"depth":168,"text":353},{"id":483,"depth":168,"text":705},"One engine, two targets: web and native",{"id":531,"depth":168,"text":532},{"id":567,"depth":168,"text":568},{"id":611,"depth":168,"text":612},null,"BTCUSDT kline chart with orderbook heatmap behind the candles — resting liquidity bands by price and time, rendered in one canvas","2026-07-16","How to render a kline candlestick chart with a real-time orderbook depth heatmap behind the candles — in one canvas, at native speed. Install, code, and streaming.",false,"md",[716,719,722,725],{"q":717,"a":718},"What is a kline chart with an orderbook heatmap?","It is a candlestick (kline) chart that also renders resting limit-order liquidity as a colored heatmap behind the candles: time runs along the X axis, price along the Y axis, and each cell is colored by how much size is resting at that price over time. The candles and the heatmap share one canvas, one price axis, one time axis, and one pan\u002Fzoom state, so the two views never drift apart.",{"q":720,"a":721},"Which JavaScript library renders candles and an orderbook heatmap in one canvas?","kline-orderbook-chart (published on npm, source on GitHub) renders candlesticks and a real-time orderbook depth heatmap in a single canvas, with synchronized pan, zoom, and crosshair. It also adds footprint cells, a liquidation heatmap, and 18+ indicators. The same engine runs on the web and inside native desktop apps.",{"q":723,"a":724},"Can it handle real-time orderbook updates without re-rendering everything?","Yes. A new heatmap column is appended at the cost of the rows it touches, not the whole matrix, and candle appends are O(1) amortised. The render loop batches to animation frames, so a chart taking 10 Hz orderbook snapshots stays at 60 fps on a mid-range laptop.",{"q":726,"a":727},"Does the same chart engine work on both web and native desktop apps?","Yes. The engine computes a renderer-agnostic command buffer each frame. On the web it draws to a canvas; in a native Rust app it draws through your own painter (a GPUI adapter ships as a reference). One engine, identical output, two targets.",{},"https:\u002F\u002Ftapedelta.com\u002Fblog\u002Fkline-heatmap\u002Fbtcusdt-orderbook-heatmap-chart.png","Kline candlestick chart of BTCUSDT with a real-time orderbook depth heatmap rendered behind the candles, RSI Premium subplot, and resting-liquidity bands mapped by price and time","\u002Fblog\u002Fkline-chart-orderbook-heatmap-library","12 min read",{"title":5,"description":712},"Kline Chart With Orderbook Heatmap — Library Guide | Tape Delta","blog\u002Fkline-chart-orderbook-heatmap-library","CHARTING","8Ah9zcD1eGeUZSu21p7LrqWlsJbhNK9m0-LgG-umgto",[739,746,747,755,762,771,778,785,792,800,809,816,822,829,836,843,850,856],{"path":527,"title":740,"description":741,"tag":742,"date":711,"readTime":743,"coverImage":744,"coverAlt":745},"Building a Native GPUI Chart in Rust: A GEX Gamma Heatmap","A production Rust charting library that renders candlesticks, an orderbook heatmap, and a GEX gamma-exposure heatmap natively — the same engine embeds in a GPUI desktop app and on the web.","ENGINEERING","13 min read","\u002Fblog\u002Fgpui\u002Foptions-gex-heatmap-terminal.png","Options GEX gamma-exposure heatmap beside a kline + orderbook-heatmap chart, both rendered by one native Rust engine",{"path":731,"title":5,"description":712,"tag":736,"date":711,"readTime":732,"coverImage":39,"coverAlt":710},{"path":748,"title":749,"description":750,"tag":751,"date":752,"readTime":732,"coverImage":753,"coverAlt":754},"\u002Fblog\u002Fopen-interest-reversal-continuation-patterns","Open Interest Patterns: Reversal & Continuation","How open interest confirms continuation or warns of reversals — the four OI scenarios, divergence, squeeze exhaustion and climax spikes, with chart illustrations.","ORDER FLOW","2026-06-25","\u002Fblog\u002Foi\u002Foi-patterns-cover.png","Price uptrend rolling over into a reversal at a highlighted pivot, with an open interest column histogram peaking and fading underneath",{"path":756,"title":757,"description":758,"tag":751,"date":759,"readTime":743,"coverImage":760,"coverAlt":761},"\u002Fblog\u002Fwhat-is-open-interest-trading-oi-cvd-guide","What Is Open Interest? Trading OI with CVD","What open interest is, how it differs from volume, the four OI flow buckets, and how to pair OI with CVD to read squeezes, traps and stealth accumulation.","2026-06-24","\u002Fblog\u002Foi\u002Fopen-interest-cover.png","Open Interest sub-pane below a BTC\u002FUSDT chart with bull\u002Fbear inflow columns and a trapped-trader spike halo on the candles",{"path":763,"title":764,"description":765,"tag":766,"date":767,"readTime":768,"coverImage":769,"coverAlt":770},"\u002Fblog\u002Fwhat-is-gex-gamma-exposure-guide","What Is GEX? Gamma Exposure Explained for Traders","GEX (gamma exposure) measures dealer hedging pressure and signals whether the market will pin or trend. Learn gamma flip, max pain, and call and put walls.","OPTIONS GEX","2026-06-15","17 min read","\u002Fblog\u002Fgex\u002Fgex-options-terminal.png","Options GEX panel with net GEX, gamma flip and max pain tiles, a GEX-by-strike profile, and call\u002Fput walls drawn on the price chart",{"path":772,"title":773,"description":774,"tag":766,"date":775,"readTime":732,"coverImage":776,"coverAlt":777},"\u002Fblog\u002Fgex-heatmap-explained","GEX Heatmap Explained: Reading Dealer Gamma by Strike","A GEX heatmap maps gamma exposure across time and strike. Read the signed call\u002Fput-wall and |GEX| intensity views, and trade walls as they build and drain.","2026-06-14","\u002Fblog\u002Fgex\u002Fgex-heatmap-signed.png","Signed GEX heatmap with green call-wall bands above price and red put-wall bands below, dealer gamma mapped by strike across time",{"path":779,"title":780,"description":781,"tag":766,"date":782,"readTime":732,"coverImage":783,"coverAlt":784},"\u002Fblog\u002Fgex-indicator-chart-overlay","GEX Indicator: Trading Options Gamma Levels on Your Chart","A GEX indicator draws dealer gamma levels — gamma flip, max pain, call and put walls — straight onto your candles, with a live regime read. How to read and trade the overlay.","2026-06-13","\u002Fblog\u002Fgex\u002Fgex-walls-surface.png","GEX indicator drawing gamma flip, max pain and call\u002Fput walls as labelled levels on a price chart with a live regime read box",{"path":786,"title":787,"description":788,"tag":751,"date":789,"readTime":743,"coverImage":790,"coverAlt":791},"\u002Fblog\u002Fhow-to-read-dom-ladder-trading","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","\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":793,"title":794,"description":795,"tag":751,"date":796,"readTime":797,"coverImage":798,"coverAlt":799},"\u002Fblog\u002Fliquidation-heatmap-trend-trading-guide","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":801,"title":802,"description":803,"tag":804,"date":805,"readTime":806,"coverImage":807,"coverAlt":808},"\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":810,"title":811,"description":812,"tag":751,"date":813,"readTime":732,"coverImage":814,"coverAlt":815},"\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":630,"title":817,"description":818,"tag":751,"date":819,"readTime":732,"coverImage":820,"coverAlt":821},"Trading Chart with Depth Heatmap: Complete Guide [2026]","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.","2026-05-15","\u002Fblog\u002Ftrading-chart-with-depth-heatmap-hero.png","BTC\u002FUSDT chart with orderbook depth heatmap, footprint, liquidation overlay, and RSI",{"path":639,"title":823,"description":824,"tag":751,"date":825,"readTime":826,"coverImage":827,"coverAlt":828},"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":621,"title":830,"description":831,"tag":736,"date":832,"readTime":833,"coverImage":834,"coverAlt":835},"Choosing an Orderbook Heatmap Chart Library: A Practical Buyer's Guide for 2026","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.","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":837,"title":838,"description":839,"tag":840,"date":841,"readTime":826,"coverImage":834,"coverAlt":842},"\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":844,"title":845,"description":846,"tag":840,"date":847,"readTime":743,"coverImage":848,"coverAlt":849},"\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":851,"title":852,"description":853,"tag":840,"date":854,"readTime":833,"coverImage":834,"coverAlt":855},"\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":857,"title":858,"description":859,"tag":840,"date":860,"readTime":826,"coverImage":820,"coverAlt":861},"\u002Fblog\u002Ffootprint-chart-vs-candlestick-chart","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",1784209303534]