Install

npm install @mrd/chart-engine

Quick Start

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

// Preload the engine binary in the background
prefetchWasm()

const chart = await createChartBridge(document.getElementById('chart'), {
  licenseKey: 'MRD-XXXX-XXXX-XXXX-20270101',
  theme: 'dark',
  precision: 2,
  intervalSec: 3600,
})

// Load candlestick data
// Timestamps are in seconds — divide Binance ms timestamps by 1000
const len = rawKlines.length
const timestamps = new Float64Array(rawKlines.map(k => k[0] / 1000))
const open       = new Float64Array(rawKlines.map(k => +k[1]))
const high       = new Float64Array(rawKlines.map(k => +k[2]))
const low        = new Float64Array(rawKlines.map(k => +k[3]))
const close      = new Float64Array(rawKlines.map(k => +k[4]))
const volume     = new Float64Array(rawKlines.map(k => +k[5]))

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

// Enable indicators
chart.enableVolume(true)
chart.enableRsi(true, 14)
chart.enableCvd(true)

// Start rendering
chart.start()

// Real-time update from WebSocket
ws.onmessage = (e) => {
  const { k } = JSON.parse(e.data)
  if (k.x) chart.appendKline(k.t / 1000, +k.o, +k.h, +k.l, +k.c, +k.v)
  else      chart.updateLastKline(k.t / 1000, +k.o, +k.h, +k.l, +k.c, +k.v)
}

// Resize on container resize
new ResizeObserver(() => chart.resize()).observe(canvas.parentElement)

// Pause when tab is hidden
document.addEventListener('visibilitychange', () =>
  document.hidden ? chart.pause() : chart.resume()
)

// Free engine memory on component unmount
chart.destroy()

Orderbook Heatmap

// matrix: Float64Array of length rows * cols, row-major
// yStart: lowest price level, yStep: price per row
// xStart: Unix timestamp (seconds) of first column, xStep: seconds per column
chart.setHeatmap(matrix, rows, cols, xStart, xStep, yStart, yStep)
chart.enableHeatmap(true)

// Append a new column in real-time
chart.appendHeatmapColumn(colData, colTimestamp, yStart, yStep)

// Update the current column as the order book ticks
chart.updateLastHeatmapColumn(colData, yStart, yStep)

Footprint Chart

chart.setChartType(2)
chart.setFootprintTickSize(10)
chart.footprintEnsureLen(timestamps.length)

// Batch-add trades from aggTrade stream (flat Float64Array: barIdx, price, qty, isBuyerMaker)
chart.footprintAddTradeBatch(flat)   // flat.length must be a multiple of 4

Drawing Tools

chart.setDrawingTool('fibonacci')   // trendline | horizontal | arrow | fibonacci |
                                    // extension | long | short | vwap | elliott | label

chart.getDrawingsJson()             // export → JSON string
chart.setDrawingsJson(json)         // restore saved drawings

chart.onDrawingComplete = (id, type, points) => { /* persist to backend */ }

Features

| | Standard | Professional | Enterprise | |---|:---:|:---:|:---:| | Candlestick + Volume | ✓ | ✓ | ✓ | | RSI + EMA | ✓ | ✓ | ✓ | | 5 drawing tools | ✓ | ✓ | ✓ | | All 10+ drawing tools | — | ✓ | ✓ | | Orderbook Heatmap | — | ✓ | ✓ | | Footprint Chart | — | ✓ | ✓ | | Liquidation Heatmap | — | ✓ | ✓ | | OI / CVD / Funding Rate | — | ✓ | ✓ | | Large Trade Bubbles | — | ✓ | ✓ | | VRVP / TPO | — | — | ✓ | | Smart Money Concepts | — | — | ✓ | | VPIN / Stops & Icebergs | — | — | ✓ | | Custom Indicator Plugin | — | — | ✓ | | White-label | — | — | ✓ |

View full pricing →

Browser Support

Chrome 80+ · Firefox 79+ · Safari 15.2+ · Edge 80+ · Mobile Chrome · Mobile Safari

Requires a modern browser (ES2020+).

Documentation

Getting Started · API Reference · Data Guide · Indicators · React · Vue · Svelte

License

Commercial software. A valid license key is required for production use.
14-day free trial available — get a trial key.