Sub-panels

Sub-panels stack below the main price area, each with its own Y-axis scale. Toggle RSI and MACD with the buttons.

Setup

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

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

const price = new CandlePanel();
price
  .addIndicator(new SMAIndicator(20, { color: '#f59e0b' }))
  .addIndicator(new EMAIndicator(50, { color: '#a78bfa' }));

chart
  .addPanel(price)
  .addPanel(new VolumePanel())
  .addPanel(new RSIPanel(14))
  .addPanel(new MACDPanel(12, 26, 9));

Adding and removing panels at runtime

const rsi = new RSIPanel(14);
chart.addPanel(rsi);

// remove later
chart.removePanel(rsi);

// check if present (returns the panel instance or undefined)
const found = chart.getPanel(RSIPanel);

Panel height ratios

Each panel class has a default heightRatio that controls how much vertical space it takes relative to the total chart height. You can override it:

const vol = new VolumePanel();
vol.heightRatio = 0.12; // 12% of total height
chart.addPanel(vol);

Available sub-panels

Class	Description
VolumePanel	Volume bars with bull/bear colouring
RSIPanel(period)	Relative Strength Index with 70/30 reference lines
MACDPanel(fast, slow, signal)	MACD histogram + signal line