Introduction

kline-orderbook-chart is a framework-agnostic native-speed chart library with built-in orderbook heatmap, footprint, and 18+ indicators. Built for trading products that need more than candles.

kline-orderbook-chart is a chart library built for trading products. It renders candlesticks the way every other library does, then adds the views the others don't: orderbook depth as a heatmap behind the candles, footprint cells inline on each bar, liquidation overlays, and 18+ indicators — all in one canvas, all at native speed.

You install one npm package. You point a <canvas> element at it. You hand it data. It renders.

Shell

npm install @mrd/chart-engine

JavaScript

import { createChartBridge } from '@mrd/chart-engine'

const chart = await createChartBridge(canvas, {
  licenseKey: 'YOUR_KEY',
})

chart.setKlines(timestamps, open, high, low, close, volume)
chart.start()

That's the entire onboarding for a basic candle chart. The advanced views (heatmap, footprint, liquidation, indicators) layer on with the same shape: hand the engine data, call a setting, the renderer does the rest.

What you get out of the box

Feature	Status
Candlesticks with adaptive aggregation	Built in
Orderbook depth heatmap behind the candles, in one canvas	Built in
Footprint chart (Bid×Ask, Delta, Volume modes) with POC, imbalance detection	Built in
Liquidation heatmap overlay	Built in
18+ indicators: VRVP, CVD, TPO, RSI, MACD, Stoch, Funding, Open Interest, …	Built in
Custom indicators via DeltaDSL scripting	Built in
Drawing tools: trendlines, horizontals, fibs, markers	Built in
Multi-pane subplots with shared time axis	Built in
60 fps native-speed render loop	Built in
Mobile / touch support, two-finger pan + pinch zoom	Built in
Dark + light themes via CSS variables	Built in
Framework-agnostic (React, Vue, Svelte, vanilla)	Built in

The list is short on purpose. Every item is part of the core engine. No plugin store, no community plugins to vet, no version-skew between the core and a footprint add-on. If it ships, it works.

Who this library is for

You are building one of these:

A crypto exchange front-end that needs a candle chart plus orderbook depth in one view.
A trading bot dashboard that visualises live executions against historical orderflow.
A prop-firm internal tool for traders who need footprint + heatmap on top of OHLCV.
A research / replay product that lets traders scrub through historical sessions with full orderflow detail.
A white-label SaaS that resells charting to your customers.

If your product would have shopped for the historical desktop tools that charge $99–199/month per user, this is the embeddable web version of that view.

You are NOT building one of these:

A general dashboard with a candle chart somewhere on it (any free chart library does that — overkill to install this).
A pure stock-screener UI with no depth context (a stock-charts library will fit better).
A static visualisation for a research paper (data-viz tools like Plotly or D3 are better tuned for that).

The buyer's guide in our blog post on choosing a charting library covers the decision framework in more detail. If you decided to evaluate us, the next page is where you start.

The four engines

The package ships four standalone rendering engines under one import. Each one mounts on its own <canvas> and consumes its own data feed — pick the engines your product needs and tree-shaking strips the rest.

Engine	What it renders	Where to start
Chart	Candles + indicators + drawings + depth heatmap + footprint, all on one canvas	Chart Instance
Orderbook · Depth Profile	Two modes on one engine — (1) single-venue Orderbook with signal overlays (OBI, spoofing, absorption, walls, gaps); (2) multi-exchange Depth Profile with horizontal liquidity bars and labeled walls	Orderbook · Depth Profile
DOM Ladder	Focused price ladder + walls + DOM-volume accumulator — no signals, no rolling heatmap	DOM Ladder
Tick Stream	Trade-by-trade tape with VWAP, large-trade markers, micro book heatmap, depth lens	Tick Stream

Most products integrate the Chart engine first and add a standalone module later when they want a side-panel orderbook view. All four engines share theming, options patterns, and lifecycle conventions, so once you've integrated one the others are quick.

How the docs are organised

Introduction (this section) — what the library is and how to get going in five minutes.
Core API — every method on the Chart engine: data loading, indicators, drawings, theming, depth heatmap, footprint, events.
Standalone Modules — the three side-panel engines (Orderbook Panel, DOM Ladder, Tick Stream) — separate canvas, separate data feed.
Guides — framework integration recipes (React, Vue), performance / pitfalls.

A complete API reference is interleaved with the prose. Every method has a heading, a signature, parameters, and a minimal example. Search the API by name with Cmd-F on any docs page; the sidebar groups methods by topic so you can also navigate by feature.

Where to go next

Getting Started — install, create your first chart, render real candles in five minutes.
Chart Instance — the object createChartBridge() returns, its lifecycle, and how the render loop works.
Data Loading — hand klines, real-time updates, and orderbook snapshots to the engine.
Theming & Colors — switch dark/light, override every candle / grid / crosshair color to match your brand.
Events & Tooltips — render your own tooltip UI from the hover payload.
Orderbook · Depth Profile · DOM Ladder · Tick Stream — the three standalone side-panel engines.
Performance & Smoothness — the do-this / don't-do-this list for keeping a tick-heavy chart at 60 fps.
Common Pitfalls — the bugs we see most often in production, with the one-line fix for each.