Financial Candlestick Chart

The Ignite UI for Angular financial price chart in Candlestick mode is used to plot stock prices, and show the stock’s high, low, open and close prices for each day. Each data point is plotted as a vertical column with vertical lines on both the top and bottom. The vertical line indicates the span between high and low values of an investment. The top of the vertical line indicates the highest price during a session and the bottom of the vertical line indicates the lowest price during a session. The vertical columns indicate the span between the opening and closing values of an investment. The columns are filled using series’ brush when there is positive value and using the series' negativeBrush when there is negative value between the opening and closing values.

Demo

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 series, indicators, and 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.

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

Required Modules

The financial series require the following modules:

// 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';
import { IgxMedianPriceIndicator } 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
@NgModule({
    imports: [
        // ...
        IgxDataChartCoreModule,
        IgxDataChartCategoryModule,
        IgxFinancialPriceSeriesModule,
        // ...
    ]
})

Code Example

This code demonstrates how to create an instance of data chart with IgxFinancialPriceSeriesComponent, IgxBollingerBandsOverlayComponent, and IgxMedianPriceIndicatorComponent. Note these series use the same X-Axis and Y-Axis but you can use multiple axes and assign them to different series. Refer to the Axis Sharing and Multiple Axes topic for more info.

 <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-financial-price-series
        name="series2"
        xAxisName="xAxis"
        yAxisName="yAxis"
        displayType="Candlestick"
        lowMemberPath="Low"
        highMemberPath="High"
        openMemberPath="Open"
        closeMemberPath="Close"
        volumeMemberPath="Volume">
    </igx-financial-price-series>

    <igx-median-price-indicator
        name="series3"
        xAxisName="xAxis"
        yAxisName="yAxis"
        displayType="Line"
        lowMemberPath="Low"
        highMemberPath="High"
        openMemberPath="Open"
        closeMemberPath="Close"
        volumeMemberPath="Volume">
    </igx-median-price-indicator>
 </igx-data-chart>

Additional Resources