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.

Demo

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:

  • The data source must be an array or a list of data items
  • The data source must contain at least one data item otherwise the data chart will not render the financial series.
  • All data items must contain at least one data column (string or date time) which should be mapped to the Label property of the financial axis (e.g. IgxCategoryXAxisComponent)
  • All data items must contain 5 numeric data column which should be mapped using properties of a financial series: openMemberPath, highMemberPath, lowMemberPath, closeMemberPath, volumeMemberPath

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

this.chart.dataSource = SampleFinancialData.create();

Required Modules

The financial series require the following modules:

// axis' modules:
import { IgxNumericYAxis } from "igniteui-angular-charts/ES5/igx-numeric-y-axis";
import { IgxCategoryXAxis } from "igniteui-angular-charts/ES5/igx-category-x-axis";
// series' modules:
import { IgxFinancialPriceSeries } from "igniteui-angular-charts/ES5/igx-financial-price-series";
import { IgxBollingerBandsOverlay } from "igniteui-angular-charts/ES5/igx-bollinger-bands-overlay";
// data chart's modules:

import { IgxDataChartCoreModule } from "igniteui-angular-charts/ES5/igx-data-chart-core-module";
import { IgxDataChartCategoryModule } from "igniteui-angular-charts/ES5/igx-data-chart-category--module";
import { IgxFinancialPriceSeriesModule } from "igniteui-angular-charts/ES5/igx-financial-price-series-module";

// in app.module.ts file
@NgModule({
    imports: [
        // ...
        IgxDataChartCoreModule,
        IgxDataChartCategoryModule,
        IgxFinancialPriceSeriesModule,
        // ...
    ]
})

Code Example

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

 <igx-data-chart
    [dataSource]="dataSource"
    width="700px"
    height="500px">

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

    <igx-bollinger-bands-overlay
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        lowMemberPath="Low"
        highMemberPath="High"
        openMemberPath="Open"
        closeMemberPath="Close"
        volumeMemberPath="Volume">
    </igx-bollinger-bands-overlay>

 </igx-data-chart>

Additional Resources