Chart

The main entry point. Creates and manages the two-canvas rendering surface, panels, tools, and pointer events.

Constructor

new Chart(container: HTMLElement | string, options?: ChartOptions)

Parameter	Type	Description
container	HTMLElement | string	DOM element or CSS selector. Must have a defined width and height.
options.candles	Candle[]	Initial candle data.
options.timeframe	Timeframe	Initial timeframe label ('1m', '5m', '15m', '1h', '4h', '1d').

const chart = new Chart('#chart', {
  candles: myCandles,
  timeframe: '1h',
});

Panel Management

addPanel(panel)

chart.addPanel(panel: Panel): this

Appends a panel and triggers a redraw. Panels stack vertically in insertion order.

removePanel(panel)

chart.removePanel(panel: Panel): this

Removes a panel by reference.

getPanel(Class)

chart.getPanel(RSIPanel): RSIPanel | undefined

Returns the first panel matching the given class, or undefined.

Tool Management

addTool(tool)

chart.addTool(tool: DrawingTool): this

Registers a drawing tool. Registered tools receive pointer events when active and their draw() is called on every redraw.

activateTool(tool | null)

chart.activateTool(trendLine)  // activate
chart.activateTool(null)       // deactivate all

Sets the active tool. Only one tool is active at a time.

Data

setCandles(candles)

chart.setCandles(candles: Candle[]): this

Replaces the full dataset and resets the viewport to show all candles.

appendCandle(candle)

chart.appendCandle(candle: Candle): this

Appends a single candle. If the viewport is at the trailing edge, it advances automatically.

getCandles()

chart.getCandles(): Candle[]

Returns the current candle array (mutable reference).

getViewport()

chart.getViewport(): ViewPort

Returns a copy of { start, end }.

View Controls

fitAll()

chart.fitAll(): this

Resets viewport to show all candles.

zoom(factor, pivotX)

chart.zoom(factor: number, pivotX: number): void

Zooms in (factor < 1) or out (factor > 1) around a pixel X position.

// Zoom in at center
chart.zoom(1 / 1.3, container.clientWidth / 2);
chart.redraw();

redraw()

chart.redraw(): void

Forces a full redraw of all panels and tools. Called automatically on most state changes.

Timeframe

setTimeframe(tf)

chart.setTimeframe('5m'): this

Sets the timeframe label (used for time-axis formatting). Fires timeframeChange.

getTimeframe()

chart.getTimeframe(): Timeframe

Events

on(event, handler) / off(event, handler)

chart.on('viewportChange', (vp: ViewPort) => { ... });
chart.on('timeframeChange', (tf: Timeframe) => { ... });
chart.off('viewportChange', handler);

Lifecycle

destroy()

chart.destroy(): void

Removes canvases and clears all event listeners.

Types

interface Candle {
  open:      number;
  high:      number;
  low:       number;
  close:     number;
  timestamp: number;   // Unix ms
  volume?:   number;
}

interface ViewPort {
  start: number;  // fractional candle index
  end:   number;
}

type Timeframe = '1m' | '5m' | '15m' | '1h' | '4h' | '1d';