All Components
Components

Components / Charts / StockChart

StockChart Overview

The StockChart is a specialized control for visualizing the price movement of a financial instrument over a certain period of time.

Stockcharts include extensive touch support and a navigator pane for easy browsing of extended time periods. Generally, the StockChart extends the Kendo UI Chart component and shares most of its features.

Basic Usage

The following example demonstrates the StockChart in action.

import { Component } from '@angular/core';
import { StockDataService } from './stock-data.service';

@Component({
    selector: 'my-app',
    template: `
        <kendo-stockchart>
            <kendo-chart-title text="The Boeing Company\nNYSE:BA">
            </kendo-chart-title>
            <kendo-chart-series>
                <kendo-chart-series-item
                    type="candlestick"
                    [data]="data"
                    openField="Open"
                    closeField="Close"
                    lowField="Low"
                    highField="High"
                    categoryField="Date">
                </kendo-chart-series-item>
            </kendo-chart-series>
            <kendo-chart-navigator>
             <kendo-chart-navigator-select [from]="from" [to]="to">
             </kendo-chart-navigator-select>
              <kendo-chart-navigator-series>
                <kendo-chart-navigator-series-item type="area" [data]="data" field="Close" categoryField="Date">
                </kendo-chart-navigator-series-item>
             </kendo-chart-navigator-series>
            </kendo-chart-navigator>
        </kendo-stockchart>
    `
})
export class AppComponent {

    public data: any[] = [];
    public from: Date = new Date('2009/02/05');
    public to: Date = new Date('2011/10/07');

    constructor(private service: StockDataService) {
        this.service.get().then((data) => {
            this.data = data;
        });
    }
}

import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { StockChartModule } from '@progress/kendo-angular-charts';
import { AppComponent } from './app.component';
import { StockDataService } from './stock-data.service';

import 'hammerjs';


@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports:      [ BrowserModule, BrowserAnimationsModule, HttpClientModule, HttpClientJsonpModule , StockChartModule ],
    providers:    [ StockDataService ]
})
export class AppModule {}

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

@Injectable()
export class StockDataService {
    private url = 'https://demos.telerik.com/kendo-ui/service/StockData';

    constructor(private http: HttpClient) {
    }

    public get(filter?: any): Promise<any[]> {
        return new Promise<any[]>((resolve: Function) => {
            this.http.jsonp(this.url + this.getOptions(filter), 'callback')
                .subscribe(result => resolve(result));
        });
    }

    private getOptions(filter: any): string {
        let params = new HttpParams();

        if (filter) {
            const filters = {
                logic: 'and',
                filters: [{
                    field: 'Date',
                    operator: 'gte',
                    value: filter.from
                }, {
                    field: 'Date',
                    operator: 'lt',
                    value: filter.to
                }]
            };

            params = params.append('filter', JSON.stringify(filters));
        }

        return params.keys.length ? '&' + params.toString() : '';
    }
}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Functionality and Features

In addition to its individual features, the StockChart supports all configuration options of the Chart.

Navigator

The StockChart navigator represents a pane that is placed at the bottom of the chart and which can be used to change the date interval in the main panes.

To limit the range that is displayed by the Chart, refer to the article on appearance.

To configure the navigator, either:

To load the main series data for the selected period on demand, use the navigatorFilter event. In this case, you can prevent the navigator from being redrawn by using the skipNavigatorRedraw method.

import { Component } from '@angular/core';
import { StockDataService } from './stock-data.service';

@Component({
    selector: 'my-app',
    template: `
        <kendo-stockchart (navigatorFilter)="onNavigatorFilter($event)">
            <kendo-chart-series>
               <kendo-chart-series-item
                   type="candlestick"
                   [data]="seriesData"
                   openField="Open"
                   closeField="Close"
                   lowField="Low"
                   highField="High"
                   categoryField="Date">
               </kendo-chart-series-item>
            </kendo-chart-series>
            <kendo-chart-navigator>
              <kendo-chart-navigator-select [from]="from" [to]="to">
              </kendo-chart-navigator-select>
              <kendo-chart-navigator-series>
                <kendo-chart-navigator-series-item type="area" [data]="navigatorData" field="Close" categoryField="Date">
                </kendo-chart-navigator-series-item>
             </kendo-chart-navigator-series>
            </kendo-chart-navigator>
        </kendo-stockchart>
    `
})
export class AppComponent {

    public seriesData: any[] = [];
    public navigatorData: any[] = [];
    public from: Date = new Date('2009/02/05');
    public to: Date = new Date('2011/10/07');

    constructor(private service: StockDataService) {
        // Loading low resolution data for the navigator series and detailed data for the main series
        service.getAll({ from: this.from, to: this.to }).then((data) => {
            this.navigatorData = data[0];
            this.seriesData = data[1];
        });
    }

    public onNavigatorFilter(e) {
        // Get the data for the selected period
        this.service.get({ from: e.from, to: e.to }).then((data) => {
            // Prevent the navigator from being redrawn because of the change in the options
            // We just need to change the data in the main series.
            e.sender.skipNavigatorRedraw();

            this.seriesData = data;
        });
    }
}

import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { StockChartModule } from '@progress/kendo-angular-charts';
import { AppComponent } from './app.component';
import { StockDataService } from './stock-data.service';

import 'hammerjs';

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports:      [ BrowserModule, BrowserAnimationsModule, HttpClientModule, HttpClientJsonpModule, StockChartModule ],
    providers:    [ StockDataService ]
})
export class AppModule {}

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

@Injectable()
export class StockDataService {
    private url = 'https://demos.telerik.com/kendo-ui/service/StockData';

    constructor(private http: HttpClient) {
    }

    public get(filter?: any): Promise<any[]> {
        return new Promise<any[]>((resolve: Function) => {
            this.http.jsonp(this.url + this.getOptions(filter), 'callback')
                .subscribe(result => resolve(result));
        });
    }

    public getAll(filter: any): Promise<any> {
        return Promise.all([this.get(), this.get(filter)]);
    }

    private getOptions(filter: any): string {
        let params = new HttpParams();

        if (filter) {
            const filters = {
                logic: 'and',
                filters: [{
                    field: 'Date',
                    operator: 'gte',
                    value: filter.from
                }, {
                    field: 'Date',
                    operator: 'lt',
                    value: filter.to
                }]
            };

            params = params.append('filter', JSON.stringify(filters));
        }

        return params.keys.length ? '&' + params.toString() : '';
    }
}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
In this article