All Components

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