All Components

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);

Features and Functionalities

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 { HttpClient, HttpParams } from '@angular/common/http';

@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
              [categoryAxis]="categoryAxisOptions"
              [hint]="hintOptions"
              [pane]="paneOptions"
              [visible]="isVisible">
              <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>
        <br /><br />
        <button class="k-button" (click)="isVisible = !isVisible">Toggle Navigator</button>
    `
})
export class AppComponent {
    private url = 'https://demos.telerik.com/kendo-ui/service/StockData';
    public seriesData: any[] = [];
    public navigatorData: any[] = [];
    public from: Date = new Date('2009/02/05');
    public to: Date = new Date('2011/10/07');
    public isVisible = true;

    public categoryAxisOptions = {
      axisCrossingValue: 5,
      baseUnit: 'months',
      background: '#000',
      color: '#fff'
    };

    public hintOptions = {
      format: '{0:dd MMM, yyyy}'
    };

    public paneOptions = {
      background: 'rgba(209, 242, 78, 0.2)',
      border: {
        color: 'black',
        dashType: 'longDashDot',
        width: 2
      },
      height: 150,
      title: 'Pane title'
    };

    constructor(private http: HttpClient) {
        // Load low resolution data for the navigator series and detailed data for the main series.
        this.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.
            // You only need to change the data in the main series.
            e.sender.skipNavigatorRedraw();

            this.seriesData = data;
        });
    }

    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 { 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