All Components

Panning and Zooming

The Chart enables the user to change the displayed range by panning and zooming.

Panning is performed by dragging over the plot area.

Zooming is performed by either:

  • Mouse-wheeling on desktop or pinch zoom on mobile, or
  • Holding the Shift key and selecting 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 Direction

You can prevent panning and zooming for an axis by using the lock configuration. To disable pan-and-zoom in the vertical direction, set the pannable.lock, zoomable.mouoswheel.lock, and zoomable.selection.lock options to 'y'. To disable pan-and-zoom 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);

In this article