Bollinger Bands (BB)

Overview

Bollinger Bands represent volatility bands placed above and below a simple moving average. The band width increases as standard deviation increases, expanding during high volatility and contracting during low volatility.

Calculation Model

The indicator comprises three plots:

• Basis Line: N-period Simple Moving Average (SMA).
• Upper Band: SMA + (K * Standard Deviation).
• Lower Band: SMA - (K * Standard Deviation).

Registering Bollinger Bands

Register Bollinger Bands using the Charting API:

window.ChartingAPI.registerIndicator('bb', {
  name: 'Bollinger Bands',
  type: 'overlay',
  params: { period: 20, stdDev: 2 },
  defaultColor: '#4caf50',
  calculate: function(bars, params) {
    const period = params.period || 20;
    const mult = params.stdDev || 2;
    // Returns { basis, upper, lower }
  },
  render: function(ctx, chart, values, bounds, color) {
    // Renders basis, upper, lower lines
  }
});

Shading Bands Layer

To improve visual readability, fill the background zone between the upper and lower bands with a transparent shade:

// Shader code snippet
ctx.save();
ctx.fillStyle = color || 'rgba(76, 175, 80, 0.05)';
ctx.beginPath();
// Create polygon path mapping upper and lower bounds
ctx.fill();
ctx.restore();