AutoBaseUnitSteps

The allowed time-interval steps when baseUnit is set to either "fit" or "auto".

The axis will divide the active period into the smallest possible intervals
that do not exceed the set maxDateGroups value.

import { Component } from '@angular/core';
import { AutoBaseUnitSteps } from '@progress/kendo-angular-charts';
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-category-axis>
                <kendo-chart-category-axis-item [autoBaseUnitSteps]="baseUnitSteps">
                </kendo-chart-category-axis-item>
            </kendo-chart-category-axis>
            <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 baseUnitSteps: AutoBaseUnitSteps = {
      // Do not allow zooming into hours
      hours: []
    };

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

days? number[]

The preferred interval steps when displaying days.

hours? number[]

The preferred interval steps when displaying hours.

milliseconds? number[]

The preferred interval steps when displaying milliseconds.

minutes? number[]

The preferred interval steps when displaying minutes.

months? number[]

The preferred interval steps when displaying months.

seconds? number[]

The preferred interval steps when displaying seconds.

weeks? number[]

The preferred interval steps when displaying weeks.

years? number[]

The preferred interval steps when displaying years.