Indicators

Overlay indicators render directly on top of the price panel. Toggle them with the buttons below.

Adding indicators

import {
  Chart, CandlePanel, VolumePanel,
  SMAIndicator, EMAIndicator, BollingerBandsIndicator,
} from 'chartgpu';

const chart = new Chart('#chart', { candles, timeframe: '1m' });
const panel = new CandlePanel();

panel
  .addIndicator(new SMAIndicator(20, { color: '#f59e0b' }))
  .addIndicator(new EMAIndicator(50, { color: '#a78bfa' }))
  .addIndicator(new BollingerBandsIndicator(20, 2));

chart.addPanel(panel);
chart.addPanel(new VolumePanel());

Indicators are attached to a panel, not the chart directly. They receive the same candle slice and viewport that the panel uses, so they stay in perfect sync with zoom and pan.

Toggling visibility

const sma = new SMAIndicator(20);
panel.addIndicator(sma);

// hide/show without removing
sma.visible = false;
chart.redraw();

Available indicators

Class	Description
SMAIndicator(period, opts)	Simple moving average line
EMAIndicator(period, opts)	Exponential moving average line
BollingerBandsIndicator(period, stdDev)	Upper / middle / lower bands
VolumeProfileIndicator()	Horizontal volume distribution bars

Legend

Each indicator automatically adds an entry to the panel's legend. The legend updates on hover to show the value at the crosshair position.