Heatmaps, Signals &
Professional Indicators

import { createChartBridge, prefetchEngine } from 'kline-orderbook-chart'

// Pre-load engine for faster first render (optional)
prefetchEngine()

// Create chart
const canvas = document.getElementById('chart')
const chart = await createChartBridge(canvas, {
  licenseKey: 'YOUR_LICENSE_TOKEN', // omit or 'trial' for a 14-day trial
})

// Load data (six separate arrays)
chart.setKlines(
  [1710000000, 1710003600], // timestamps (seconds)
  [65200, 65600],           // opens
  [65800, 66100],           // highs
  [65100, 65400],           // lows
  [65600, 65900],           // closes
  [1234.5, 987.2],          // volumes
)
chart.setCandleInterval(3600)
chart.setPrecision(1)

// Enable indicators
chart.enableVolume()
chart.enableRsi()
chart.setRsiPeriod(14)

// Start rendering
chart.start()

// Real-time update
ws.onmessage = (e) => {
  const { k } = JSON.parse(e.data)
  chart.updateLastKline(Math.floor(k.t / 1000), +k.o, +k.h, +k.l, +k.c, +k.v)
}