BollingerBandsLayerConfig

Renders Bollinger Bands as three lines (upper, middle, lower) with an optional fill between the outer bands.

Examples

JSX - Minimal configuration

<BollingerBands />

JSX - Full configuration

<BollingerBands
  id="bb-20-2"
  period={20}
  standardDeviations={2}
  offset={0}
  inputs={[{ key: 'input', source: { type: 'price', field: 'close' } }]}
  outputs={['middle', 'upper', 'lower']}
  lookback={(period) => period * 3}
  calculate={true}
  includeInAutoScale={true}
  series={{
    middle: { color: '#777', width: 1, style: 'solid' },
    upper: { color: '#777', width: 1, style: 'solid' },
    lower: { color: '#777', width: 1, style: 'solid' },
  }}
  bands={{
    channel: { fillColor: 'rgba(0, 100, 200, 0.1)' },
  }}
  markers={{
    value: {
      mode: 'last-visible',
      line: { color: '#555', width: 1, style: 'dashed', dashes: [5, 5] },
      label: { backgroundColor: '#ccc', color: '#1a1a1a' },
    },
  }}
  legend={{
    label: 'BB 20 2',
    fields: [
      { output: 'upper', label: '', color: '#777' },
      { output: 'middle', label: '', color: '#777' },
      { output: 'lower', label: '', color: '#777' },
    ],
  }}
  yAxis={{
    side: 'right',
    width: 80,
  }}
/>

Configuration Object - Full configuration

{
  id: 'bb-20-2',
  type: 'bollinger-bands',
  period: 20,
  standardDeviations: 2,
  offset: 0,
  inputs: [{ key: 'input', source: { type: 'price', field: 'close' } }],
  outputs: ['middle', 'upper', 'lower'],
  lookback: (period) => period * 3,
  calculate: true,
  includeInAutoScale: true,
  series: {
    middle: { color: '#777', width: 1, style: 'solid' },
    upper: { color: '#777', width: 1, style: 'solid' },
    lower: { color: '#777', width: 1, style: 'solid' },
  },
  bands: {
    channel: { fillColor: 'rgba(0, 100, 200, 0.1)' },
  },
  markers: {
    value: {
      mode: 'last-visible',
      line: { color: '#555', width: 1, style: 'dashed', dashes: [5, 5] },
      label: { backgroundColor: '#ccc', color: '#1a1a1a' },
    },
  },
  legend: {
    label: 'BB 20 2',
    fields: [
      { output: 'upper', label: '', color: '#777' },
      { output: 'middle', label: '', color: '#777' },
      { output: 'lower', label: '', color: '#777' },
    ],
  },
  yAxis: {
    side: 'right',
    width: 80,
  },
}

Properties

Base Props

BaseLayerConfig

type

• Type: 'bollinger-bands'

standardDeviations

• Type: number
• Default: 2

The number of standard deviations used to calculate the upper and lower bands.

source

• Type: 'open' | 'high' | 'low' | 'close' | 'volume'

Optional shorthand for mapping the Bollinger Bands input without writing full inputs. If inputs is provided, it takes precedence.

series

• Type: { middle?: false | LineConfig; upper?: false | LineConfig; lower?: false | LineConfig }

Visual series configuration for middle, upper, and lower band lines.

bands

• Type: { channel?: false | { fillColor?: string } }

Band fill configuration for the Bollinger channel.

markers

• Type: { value?: false | ValueMarkerConfig }

Value marker configuration for the middle line.

Defaults

Property	Default
id	'bollinger-bands-layer'
period	20
inputs	close price field
outputs	['middle', 'upper', 'lower']
scale	{ key: 'value_auto', domain: 'value', range: { type: 'auto' } }

TypeScript

interface BollingerBandsLayerConfig extends BaseLayerConfig {
  type: 'bollinger-bands';
  source?: 'open' | 'high' | 'low' | 'close' | 'volume';
  standardDeviations?: number;
  offset?: number;
  series?: {
    middle?: false | LineConfig;
    upper?: false | LineConfig;
    lower?: false | LineConfig;
  };
  bands?: {
    channel?: false | {
      fillColor?: string;
    };
  };
  markers?: {
    value?: false | ValueMarkerConfig;
  };
}