Components / Charts / StockChart

Getting Started with Kendo UI for Angular StockChart

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 the navigator functionality, the StockChart supports all configuration options of the Chart.

In this article