Version 24.2 (latest)

Financial Overlays

The below image demonstrates using the Financial Overlays with the igFinancialChart. There are two types of overlays the BollingerBands and PriceChannel.

financialchart jquery layers overlay.png
Property Name Type Description

FinancialOverlayTypeCollection

Gets or Sets the collection of types for the overlays.

BrushCollection

Gets or sets the palette of brushes to use for coloring the overlay.

BrushCollection

Gets or sets the palette of brushes to use for outlines on the overlay.

double

Gets or sets the thickness of the overlay.

The following demonstrates how to set the OverlayTypes through code:

In JavaScript

$("#financialChart").igFinancialChart({
    dataSource: data,
    overlayTypes: "BollingerBands",
    overlayBrushes: ["Red"],
    overlayOutLines: ["Green"],
    overlayThickness: 2
});
$("#financialChart").igFinancialChart("option", "overlayTypes", "BollingerBands");
$("#financialChart").igFinancialChart("option", "overlayBrushes", ["Red"]);
$("#financialChart").igFinancialChart("option", "overlayOutLines", ["Green"]);
$("#financialChart").igFinancialChart("option", "overlayThickness", 2);

Related Content

Topic Purpose

This article explains the trendline layer of the chart.

View on GitHub