// LIVE DEMOS

Chart library demos — run them in your browser

Live, in-browser demos of the kline-orderbook-chart library: kline candlesticks, orderbook heatmap, footprint, DOM ladder, volume profile, CVD, RSI, bar replay and a mobile/touch chart — all on real Binance data, no clone, no build step. Read the full source for each, copy it, ship it.

Basics

Candlestick + Volume

A real-time candlestick chart with a synchronized volume histogram, streaming live BTCUSDT data from Binance.

Docs Full app
Loading chart…
import { createChartBridge } from '/engine/mrd-chart-engine.mjs'
import { fetchKlines, subscribeKline, intervalToSeconds } from '/demo/binanceData.js'

export async function mount(canvas) {
  const chart = await createChartBridge(canvas, { licenseKey: 'trial' })
  chart.setTheme('dark')
  chart.setPrecision(2)
  chart.setCandleInterval(intervalToSeconds('1h'))

  const data = await fetchKlines('BTCUSDT', '1h', 1000)
  chart.setKlines(data.t, data.o, data.h, data.l, data.c, data.v)
  chart.enableVolume()
  chart.start()

  // ── Live updates ──
  let barEnd = data.t[data.t.length - 1] + intervalToSeconds('1h')
  const stopStream = subscribeKline('BTCUSDT', '1h', (k) => {
    if (k.t >= barEnd) {
      chart.appendKline(k.t, k.o, k.h, k.l, k.c, k.v)
      barEnd = k.t + intervalToSeconds('1h')
    } else {
      chart.updateLastKline(k.t, k.o, k.h, k.l, k.c, k.v)
    }
  })

  // ── Responsive + battery-friendly ──
  const ro = new ResizeObserver(() => chart.resize())
  ro.observe(canvas.parentElement)
  const onVis = () => (document.hidden ? chart.pause() : chart.resume())
  document.addEventListener('visibilitychange', onVis)

  return () => {
    stopStream()
    ro.disconnect()
    document.removeEventListener('visibilitychange', onVis)
    chart.destroy()
  }
}

Technical Implementation

The chart is created with a single createChartBridge(canvas, …) call that boots the WebAssembly engine and binds it to your <canvas>. Historical bars are pushed as six parallel Float64Array columns through setKlines(t, o, h, l, c, v) — the columnar layout keeps the JS↔WASM transfer allocation-free. enableVolume() attaches the histogram sub-series and start() hands the render loop to the engine's internal scheduler.

Features & Capabilities

Live updates arrive over a Binance kline WebSocket: each tick either extends the forming bar via updateLastKline() or rolls a new bar with appendKline(). A ResizeObserver calls resize() so the canvas always fills its container, and a visibilitychange handler pause()s the engine while the tab is hidden to save battery.

Integration & Best Practices

Everything runs client-side — there is no server round-trip for rendering. Always return a cleanup function from mount() that calls destroy() to release the WASM instance and detach listeners; see the common pitfalls guide and the performance notes for tuning large datasets.

Documentation
Getting Started Data Loading Chart Instance API

Related Examples & Demos

20 demos