Angular Financial Overlays

Financial Overlays are often used by traders to measure changes and to show trends in stock prices. These overlays are usually displayed in front of the IgxFinancialPriceSeriesComponent because they share the same Y-Axis scale. In contrast, financial indicators do not share the same Y-Axis scale with the IgxFinancialPriceSeriesComponent and as result financial indicators are usually plotted below or above the IgxFinancialPriceSeriesComponent or overlays. However, the chart control supports plotting both overlays as well as indicators in the same plot area, if desired, using multiple axes or by sharing axes.


The following lists the available financial overlays:

  • IgxBollingerBandsOverlayComponent (BBO) is based on the standard deviation in the prices, so they incorporate price changes in their width. The bands are wider when the standard deviation increases and narrower when the standard deviation decreases and are smoothed by a moving average. Apart from the standard deviation and smoothing period being user adjustable, there is also a user adjustable multiplier to affect the scale of the BollingerBandsOverlay width,
  • IgxPriceChannelOverlayComponent (PCO) is price volatility or the changes in price over time between two parallel lines. The lower line is the trend line and is drawn on the lows prices, and the upper line is the channel line and is based on the high prices. Channels show trend direction for any time frame. Price channels, or trend, can be up, down or sideways

Required Axes

The Angular data chart component provides various types of axes but all financial series can only use the IgxNumericYAxisComponent as Y-Axis and IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, or IgxTimeXAxisComponent as X-Axis.

Required Data

Financial overlays have the following data requirements:

You can use the SampleFinancialData as data source which meets above data requirements.

public dataSource: any[] = SampleFinancialData.create();

Required Modules

The financial series requires the following modules. to be registered in your application entry point:

  • DataChartCoreModule
  • DataChartFinancialModule
  • DataChartFinancialCoreModule
  • DataChartFinancialIndicatorsModule
  • DataChartInteractivityModule
// axis' modules:
import { IgxNumericYAxis } from 'igniteui-angular-charts';
import { IgxCategoryXAxis } from 'igniteui-angular-charts';
// series' modules:
import { IgxFinancialPriceSeries } from 'igniteui-angular-charts';
import { IgxBollingerBandsOverlay } from 'igniteui-angular-charts';
// data chart's modules:

import { IgxDataChartCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartCategoryModule } from 'igniteui-angular-charts';
import { IgxFinancialPriceSeriesModule } from 'igniteui-angular-charts';

// in app.module.ts file
    imports: [
        // ...
        // ...

Code Example

This code demonstrates how to create an instance of data chart with a IgxBollingerBandsOverlayComponent.


    <igx-category-x-axis name="xAxis" label="Date"></igx-category-x-axis>
    <igx-numeric-y-axis  name="yAxis"></igx-numeric-y-axis>



Additional Resources