Bollinger Bands in a JavaScript or React Financial Chart

Bollinger Bands show a moving average of price with a band above and below it that widens and narrows with volatility. This page explains what Bollinger Bands are, how they are calculated and how traders read them, and shows how to add Bollinger Bands to a JavaScript or React financial chart with SciTrader.js's BollingerBandsStudy, with live examples you can edit in CodePen.

info

Bollinger Bands are one of the 32 built-in technical indicators and studies in the SciTrader SDK. For the full list, with each one's options and defaults, see Every Built-in Indicator and Study. To add and remove any of them, or build an indicator picker, see Add Technical Indicators to a Financial Chart.

What Are Bollinger Bands?

Bollinger Bands, developed by John Bollinger, are a volatility indicator drawn over the price:

• The middle band is a simple moving average of the close.
• The upper and lower bands sit a number of standard deviations above and below it.

When price swings widely, the standard deviation grows and the bands move apart; when price is quiet, they close in. Because they are prices, a chart draws Bollinger Bands on the price pane, over the candles.

How Are Bollinger Bands Calculated?

Bollinger Bands use two settings: period, the number of candles (20 by default), and stdDev, the band width in standard deviations (2 by default). For each candle, over the last period closes:

$$\begin{aligned} \text{middle} &= \frac{1}{n} \sum_{i=1}^{n} \text{close}_i \\ \sigma &= \sqrt{\frac{1}{n} \sum_{i=1}^{n} \left(\text{close}_i - \text{middle}\right)^2} \\ \text{upper} &= \text{middle} + m\,\sigma \qquad \text{lower} = \text{middle} - m\,\sigma \end{aligned}$$

where $n$ is period, $m$ is stdDev, the middle band is the simple moving average of the last $n$ closes, and $\sigma$ is their standard deviation.

SciTrader divides by period (the population standard deviation), as Bollinger's original definition does. The bands start after period candles; SciTrader loads that many extra candles to the left of the visible period, so they start at the left edge.

With the default settings, if closes were normally distributed, about 95% of them would fall inside the bands. Real prices aren't normally distributed, so treat that as a rough guide.

How to Read Bollinger Bands

These are the common readings. They are conventions traders use, not signals that hold every time:

• The squeeze. Narrow bands mean low volatility, which often comes before a large move. The bands don't say which way.
• Band touches. A close at or beyond the upper band shows strength, and at the lower band weakness. In a strong trend, price can "walk the band" for many candles, so a touch alone isn't a reversal signal.
• The middle band. In an uptrend, pullbacks often find support near the middle band; in a downtrend, rallies often stall there.

How to Add Bollinger Bands to a JavaScript Financial Chart

Add a BollingerBandsStudy to the chart's studies. The example below is a BTC-USD chart from Coinbase with 20-candle, 2 standard deviation Bollinger Bands over the candles, the middle band in amber.

The code for this example is found below.

TS

import "scichart-scitrader/scitrader.css";
import {
    BollingerBandsStudy,
    CandleInterval,
    CoinbaseExchange,
    defaultExchangeProvider,
    idbPriceStore,
    OHLCStudy,
    SciFinanceChartPanel,
    VolumeStudy,
} from "scichart-scitrader";

// This example expects this HTML:
// <div id="chart" style="height: 100%"></div>

// Register a data source, once, at app startup
defaultExchangeProvider.registerExchange(CoinbaseExchange, idbPriceStore);

async function createChart() {
    // A financial chart is a SciFinanceChartPanel. Its indicators are studies, passed in `studies`
    const financeChartPanel = await SciFinanceChartPanel.create(document.getElementById("chart"), {
        exchangeName: CoinbaseExchange.name, // name="Coinbase" matches the built-in CoinbaseExchange
        symbol: "BTC-USD",
        interval: CandleInterval.SIX_HOURS,
        period: "3M",
        studies: [
            new OHLCStudy(), // the price series, as candlesticks
            new VolumeStudy(), // volume, along the bottom of the price pane
        // Bollinger Bands: an overlay, so it draws on the price pane, against the price axis.
        // period: candles in the moving average and standard deviation (default 20).
        // stdDev: how many standard deviations the bands sit from the middle band (default 2)
        new BollingerBandsStudy({
            period: 20,
            stdDev: 2,
            middleBandOptions: { stroke: "#ff9f1c", strokeThickness: 1 }, // the 20-candle SMA
        }),
        ],
    });

    // When the page goes away: financeChartPanel.cleanup();
    return financeChartPanel;
}

createChart();

How to Add Bollinger Bands to a React Financial Chart

In React, pass the same studies in the config of SciFinanceChartView, from scichart-scitrader-react. Create them in a useMemo, once per mounted chart: a study is a live object, bound to one chart.

The code for this example is found below.

React

import "scichart-scitrader/scitrader.css";
import * as React from "react";
import {
    BollingerBandsStudy,
    CandleInterval,
    CoinbaseExchange,
    defaultExchangeProvider,
    idbPriceStore,
    ISciFinanceChartPanelConfig,
    OHLCStudy,
    VolumeStudy,
} from "scichart-scitrader";
import { SciFinanceChartView } from "scichart-scitrader-react";

// Register a data source, once, at app startup
defaultExchangeProvider.registerExchange(CoinbaseExchange, idbPriceStore);

export function BollingerBandsChart() {
    // Create the config once per mounted chart: studies are live objects bound to one chart
    const config = React.useMemo<ISciFinanceChartPanelConfig>(
        () => ({
            exchangeName: CoinbaseExchange.name, // name="Coinbase" matches the built-in CoinbaseExchange
            symbol: "BTC-USD",
            interval: CandleInterval.SIX_HOURS,
            period: "3M",
            studies: [
                new OHLCStudy(), // the price series, as candlesticks
                new VolumeStudy(), // volume, along the bottom of the price pane
                // Bollinger Bands: an overlay, so it draws on the price pane, against the price axis.
                // period: candles in the moving average and standard deviation (default 20).
                // stdDev: how many standard deviations the bands sit from the middle band (default 2)
                new BollingerBandsStudy({
                    period: 20,
                    stdDev: 2,
                    middleBandOptions: { stroke: "#ff9f1c", strokeThickness: 1 }, // the 20-candle SMA
                }),
            ],
        }),
        []
    );

    // SciFinanceChartView fills its parent, so give the parent a height
    return <SciFinanceChartView config={config} />;
}

Adding and Removing Bollinger Bands at Runtime

BollingerBandsStudy is a study like any other, so you can add it to a chart that is already showing, and remove it again:

import { EStudyType, BollingerBandsStudy, studyProvider } from "scichart-scitrader";

const chart = financeChartPanel.financeApi;

// Add one with your own settings...
const study = new BollingerBandsStudy();
await chart.attachStudy(study);

// ...or by type, with the default settings, e.g. from an indicator picker
await chart.attachStudy(studyProvider.getStudy(EStudyType.BBANDS));

// Remove it
chart.detachStudy(study);

See Add Technical Indicators to a Financial Chart for more, including a ready-made indicator picker.

BollingerBandsStudy Options and Settings

Option	Default	What it does
period	20	Candles in the moving average and standard deviation
stdDev	2	How many standard deviations the bands sit from the middle band
upperBandOptions, middleBandOptions, lowerBandOptions	The theme's colours	Each band's line: stroke, strokeThickness, strokeDashArray
bandFillOptions	The theme's colours	The fill between the upper and lower bands
paneId	The price pane	The pane to draw in

Users can change the same settings in the Settings Form, and you can change them from code with applyDescriptor:

Study	Inputs	Styles
BollingerBandsStudy	period, stdDev	upperBandColor, lowerBandColor, middleBandColor, bandFillColor, strokeThickness

The BollingerBandsStudy class, with its TSDoc

class BollingerBandsStudy extends StudyBase<number> {
    period: number;
    stdDev: number;
    getRequiredWarmup(): number;
    readonly upperBandOptions: IFastLineRenderableSeriesOptions;
    readonly lowerBandOptions: IFastLineRenderableSeriesOptions;
    readonly middleBandOptions: IFastLineRenderableSeriesOptions;
    readonly bandFillOptions: IBaseBandRenderableSeriesOptions;
    constructor(options?: IBollingerBandsOptions);
    static getOptionsFromDescriptor(descriptor: TStudyDescriptor): IBollingerBandsOptions;
    /** Opts in to the in-place apply pipeline — see {@link onDescriptorApplied}.
     *  Note: BollingerBandsStudy is currently disabled at the registration
     *  level (CLAUDE.md) due to a pre-existing crash; the live-apply path
     *  lands now so it's ready when the underlying issue is fixed. */
    get supportsLiveApply(): boolean;
    createInputOutputIds(): void;
    createDataSeries(): void;
    createAxes(): AxisBase2D[];
    /** @inheritDoc */
    getLegendColor(outputId: DataSourceId): string | undefined;
    createRenderableSeries(): IRenderableSeries[];
}

The IBollingerBandsOptions interface, with its TSDoc

interface IBollingerBandsOptions extends IStudyOptions {
    inputId?: DataSourceId;
    period?: number;
    stdDev?: number;
    upperBandOptions?: IFastLineRenderableSeriesOptions;
    lowerBandOptions?: IFastLineRenderableSeriesOptions;
    middleBandOptions?: IFastLineRenderableSeriesOptions;
    bandFillOptions?: IBaseBandRenderableSeriesOptions;
}

Where to read next

• Add Technical Indicators to a Financial Chart: the other indicators, adding and removing indicators at runtime, and an indicator picker.
• Altering Study Settings: change an indicator's settings from code.
• Study Settings Form and Study List: let users edit them.