All Components

Panning and Zooming

The Chart enables the user to view specific ranges by applying panning and zooming to the component.

To perform panning, drag the plot area of the Chart.

To perform zooming, either:

  • Mouse-wheel (desktop) or pinch-zoom (mobile), or
  • Hold the Shift key and select an area.

To enable the pan-and-zoom functionality, use the pannable and zoomable options.

import { Component } from '@angular/core';
import { data } from './data';

@Component({
    selector: 'my-app',
    template: `
      <kendo-chart [pannable]="true" [zoomable]="true" [categoryAxis]="categoryAxis" [valueAxis]="valueAxis">
        <kendo-chart-series>
          <kendo-chart-series-item [data]="data" field="value" categoryField="category">
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
    `
})
export class AppComponent {
    public data: any[] = data;

    public categoryAxis: any = {
        max: new Date(2000, 1, 0),
        maxDivisions: 10
    };

    public valueAxis: any = {
        labels: {
            format: '#.00'
        }
    };
}
export const data = [];

for (let idx = 0; idx < 10000; idx++) {
    data.push({
        value: Math.floor(Math.random() * 100) + 1,
        category: new Date(2000, 0, idx)
    });
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Disabling Pan-and-Zoom Directions

You can prevent panning and zooming for an axis by using the lock configuration. To disable panning and zooming in the vertical direction, set the pannable.lock, zoomable.mouoswheel.lock, and zoomable.selection.lock options to 'y'. To disable panning and zooming in the horizontal direction, set the the pannable.lock, zoomable.mouoswheel.lock, and zoomable.selection.lock options to 'x'.

import { Component } from '@angular/core';
import { data } from './data';

@Component({
    selector: 'my-app',
    template: `
      <kendo-chart [pannable]="{ lock: 'y' }" [zoomable]="{ mousewheel: { lock: 'y' }, selection: { lock: 'y' } }"
        [categoryAxis]="categoryAxis">
        <kendo-chart-series>
          <kendo-chart-series-item [data]="data" field="value" categoryField="category">
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
    `
})
export class AppComponent {
    public data: any[] = data;

    public categoryAxis: any = {
        max: new Date(2000, 1, 0),
        maxDivisions: 10
    };
}
export const data = [];

for (let idx = 0; idx < 10000; idx++) {
    data.push({
        value: Math.floor(Math.random() * 100) + 1,
        category: new Date(2000, 0, idx)
    });
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Pan-and-Zoom Events

When the user pans or zooms the Chart, the component triggers the following events which contain the modified axes ranges.

  • dragStart—Fires when the Chart starts panning. If you prevent the event, the Chart will stop panning.
  • drag—Fires while the Chart is panning. If you prevent the event, the change in the current axes ranges will also be prevented.
  • dragEnd—Fires after the Chart stops panning.
  • zoomStart—Fires when the Chart starts zooming. If you prevent the event, the Chart will stop zooming.
  • zoom—Fires while the Chart is zooming. If you prevent the event, the change in the current axes ranges will also be prevented.
  • zoomEnd—Fires when the Chart stops zooming.

In order for the axes to be included in the axisRanges field, provide names to the axes.
If an axis range is not changed, the drag and zoom events will not include it.

import { Component } from '@angular/core';
import { data } from './data';

@Component({
    selector: 'my-app',
    template: `
      <kendo-chart [pannable]="true" [zoomable]="true" [categoryAxis]="categoryAxis" [valueAxis]="valueAxis"
        (dragStart)="onDragStart($event)" (drag)="onDrag($event)" (dragEnd)="onDragEnd($event)"
        (zoomStart)="onZoomStart($event)" (zoom)="onZoom($event)" (zoomEnd)="onZoomEnd($event)">
        <kendo-chart-series>
          <kendo-chart-series-item [data]="data" field="value" categoryField="category">
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
    `
})
export class AppComponent {
    public data: any[] = data;

    public categoryAxis: any = {
        name: 'category',
        max: new Date(2000, 1, 0),
        maxDivisions: 10
    };

    public valueAxis: any = {
        name: 'value',
        labels: {
            format: '#.00'
        }
    };

    public onDragStart(args: any): void {
        console.log('dragStart', this.axisRanges(args));
    }

    public onDrag(args: any): void {
        console.log('drag', this.axisRanges(args));
    }

    public onDragEnd(args: any): void {
        console.log('dragEnd', this.axisRanges(args));
    }

    public onZoomStart(args: any): void {
        console.log('zoomStart', this.axisRanges(args));
    }

    public onZoom(args: any): void {
        console.log('zoom', this.axisRanges(args));
    }

    public onZoomEnd(args: any): void {
        console.log('zoomEnd', this.axisRanges(args));
    }

    private axisRanges(args: any): string {
        const { value, category } = args.axisRanges;
        const valueRange = value ? `value: ${ value.min } - ${ value.max };` : '';
        const categoryRange = category ? `category: ${ category.min } - ${ category.max };` : '';

        return  valueRange + categoryRange;
    }
}
export const data = [];

for (let idx = 0; idx < 10000; idx++) {
    data.push({
        value: Math.floor(Math.random() * 100) + 1,
        category: new Date(2000, 0, idx)
    });
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article