Version: 1.0.0

Price and Volume

Configure stock charts with candlesticks in the main pane and vertical volume bars in a separate pane below.

Introduction

Volume indicators reflect trading activity and liquidity. Standard layouts display vertical volume columns aligned horizontally with candlestick bodies on a separate pane at the bottom to prevent overlapping with price wicks.

Pane Configuration

Configure price and volume panes during chart initialization:

const chart = new BacktestxChart('mount', {
  symbol: 'BTCUSD',
  panes: [
    { id: 'price_pane', heightWeight: 4 }, // Price candlestick pane
    { id: 'volume_pane', heightWeight: 1 } // Volume bar pane
  ]
});

Feeding Volume Data

Ensure your data feed emits bar data structures containing a volume property:

// Example bar payload
{
  time: 1781100000,
  open: 67250.0,
  high: 67420.0,
  low: 67100.0,
  close: 67390.0,
  volume: 124.52 // Crucial for volume plot
}

Volume Rendering Details

The volume renderer draws columns on the canvas. Bullish volume (close >= open) is painted with green tint, and bearish volume with red:

// Internal volume paint logic snippet
visibleBars.forEach((bar, index) => {
  const x = xOffset + index * slot + slot / 2;
  const maxVal = getVisibleMaxVolume();
  const barH = (bar.volume / maxVal) * volumePaneBounds.height * 0.85; // cap at 85% height
  
  ctx.fillStyle = bar.close >= bar.open ? 'rgba(38, 166, 154, 0.5)' : 'rgba(239, 83, 80, 0.5)';
  ctx.fillRect(x - bodyW / 2, volumePaneBounds.bottom - barH, bodyW, barH);
});