Panes

Introduction

Panes partition the vertical charting canvas into independent viewing grids. This is vital when displaying technical oscillators (like RSI, Stochastic, or MACD) which use arbitrary scales that differ from the asset's price scale.

Layout Configuration

You can define pane partitions and height weighting factors directly during chart instantiation:

const chartOptions = {
  symbol: 'BTCUSD',
  resolution: '30m',
  datafeed: myDatafeed,
  panes: [
    { id: 'main_price', heightWeight: 3 }, // Price pane takes 3/4 height
    { id: 'rsi_pane', heightWeight: 1 }     // RSI pane takes 1/4 height
  ]
};

const chart = new BacktestxChart('chart-mount', chartOptions);

Pane Management

The chart engine layout manager partitions the available pixel height according to the sum of heightWeight. If the chart container size changes, the vertical pane grids recalculate:

• Total Weights: 3 + 1 = 4.
• Main Pane Height: 75% of available height.
• Sub-Pane Height: 25% of available height.

Plotting on Sub-Panes

To render indicators onto a specific pane, register your indicator function and map it to the corresponding pane ID:

ChartingAPI.registerIndicator('rsi', {
  name: 'Relative Strength Index',
  paneId: 'rsi_pane', // Target the RSI pane
  calculate: function(bars) {
    // Calculation outputs values between 0 and 100
  },
  render: function(ctx, points, rsiPaneBounds) {
    ctx.strokeStyle = '#9c27b0'; // Purple plot line
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    // Render lines across the sub-pane coordinate bounds
  }
});