Panels

Panels are the horizontal sections of the chart. They stack vertically, dividing the available height by their heightRatio.

Built-in Panels

CandlePanel

Renders the main candlestick chart using the WebGPU renderer. Hosts indicators (SMA, EMA, Bollinger Bands, etc.).

import { CandlePanel } from 'chartgpu';

const candle = new CandlePanel();
candle.addIndicator(new SMAIndicator(20));
chart.addPanel(candle);

Property	Default	Description
heightRatio	0.55	Fraction of total chart height.

VolumePanel

Renders volume bars below the candle panel. Bull/bear bars match candle color.

import { VolumePanel } from 'chartgpu';
chart.addPanel(new VolumePanel());

Property	Default
heightRatio	0.10

RSIPanel

Renders the Relative Strength Index with overbought (70) and oversold (30) zones.

import { RSIPanel } from 'chartgpu';
chart.addPanel(new RSIPanel(14));  // period = 14

Property	Default
heightRatio	0.17

MACDPanel

Renders MACD line, signal line, and histogram.

import { MACDPanel } from 'chartgpu';
chart.addPanel(new MACDPanel(12, 26, 9));  // fast, slow, signal

Property	Default
heightRatio	0.17

Custom Panels

Extend Panel to create your own:

import { Panel, type DrawState } from 'chartgpu';

class BidAskSpreadPanel extends Panel {
  heightRatio = 0.12;

  draw(state: DrawState): void {
    const { ctx, candles, viewport, section, chartWidth, paddingX } = state;
    const { top, height } = section;

    // Draw into the pixel region: paddingX → paddingX + chartWidth
    //                             top → top + height
    ctx.save();
    ctx.strokeStyle = '#60a5fa';
    ctx.lineWidth = 1;
    // ... your drawing logic
    ctx.restore();
  }
}

chart.addPanel(new BidAskSpreadPanel());

DrawState reference

interface DrawState {
  ctx:        CanvasRenderingContext2D;
  candles:    Candle[];
  viewport:   ViewPort;
  section:    { top: number; height: number };
  chartWidth: number;   // pixel width of the chart area (excluding padding)
  paddingX:   number;   // left/right padding in pixels
  priceRange?: {        // injected by CandlePanel for overlays
    min:   number;
    max:   number;
    range: number;
  };
}

Coordinate helpers

const vp = viewport;
const viewLen = vp.end - vp.start;

// Candle index → pixel X
const toX = (i: number) =>
  paddingX + ((i + 0.5 - vp.start) / viewLen) * chartWidth;

// Price → pixel Y (requires priceRange)
const toY = (price: number) =>
  section.top + section.height * (1 - (price - priceRange.min) / priceRange.range);