API reference

Public surface of the three top-level classes: Chart, ChartWidget, and ChartGrid.

Chart

Headless renderer. Bring your own UI; subscribe to events; mutate state imperatively.

Construction

new Chart(host: HTMLElement, options?: ChartOptions)

Data

Method	Purpose
`setData(data)`	Replace the entire series.
`appendBar(bar)`	Append a new bar; auto-scroll if enabled.
`appendBars(bars)`	Batch append; recalculates indicators once.
`updateLastBar(bar)`	Mutate the current forming bar.
`updateLastBarFromTick(tick)`	Merge a tick into the last bar.
`getData()`	Read the raw OHLC series.

Chart type & theme

Method	Purpose
`setChartType(type)`	One of 17 types — see Chart types.
`setTheme(name)`	Switch between built-in themes.
`setTimeframe(tf)`	Switch active timeframe; rewires the live stream.

Indicators

Method	Purpose
`addIndicator(id, params?, position?)`	Adds an overlay or panel indicator. Returns instance id.
`updateIndicator(instanceId, params)`	Mutate a live indicator.
`removeIndicator(instanceId)`	Remove and tear down.

Events

All events are typed via ChartEventMap:

chart.on('orderPlace', e => /* OrderPlacePayload */)
chart.on('orderModify', e => /* OrderModifyPayload */)
chart.on('signalMarkerAdd', e => /* { marker } */)
chart.on('tradeZoneAdd', e => /* { zone } */)
chart.on('dataUpdate', e => /* { length } */)

ChartWidget

Wraps Chart in a complete UI. Same instance is available via widget.chart.

import { ChartWidget } from '@tradecanvas/chart/widget'

const widget = new ChartWidget(host, {
  symbol: 'BTCUSDT',
  timeframe: '5m',
  theme: 'dark',
  adapter: new BinanceAdapter(),
  historyLimit: 500,
  trading: true,
  features: { drawings: true, indicators: true },
  onReady: (chart) => { /* ... */ },
})

widget.chart.setData(...)
widget.destroy()

ChartGrid

Synchronized multi-chart layouts.

import { ChartGrid } from '@tradecanvas/chart'

const grid = new ChartGrid(host, { layout: '2x2', theme: 'dark' })
await grid.connectAll(new BinanceAdapter(), ['BTCUSDT','ETHUSDT','SOLUSDT','BNBUSDT'], '5m')
grid.setLayout('1x2')

Layouts: '1x2', '2x2', '2x3', '3x3'.