HelpBot Assistant

How can I help you?

Zooming in Angular Chart component

3 Feb 202624 minutes to read

Enable zooming

The chart supports zooming through the following three interaction methods:

Selection – By setting enableSelectionZooming to true in zoomSettings, zooming can be performed using a rubber-band selection.
Mouse wheel – By setting enableMouseWheelZooming to true in zoomSettings, the chart can be zoomed in and out by scrolling the mouse wheel.
Pinch – By setting enablePinchZooming to true in zoomSettings, zooming can be performed using pinch gestures on touch-enabled devices.

Pinch zooming is supported only in browsers that support multi-touch gestures.

To known about Zooming and Panning, you can check on this video:

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, AreaSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, ZoomService } from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { series1 } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, AreaSeriesService, LegendService, ZoomService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [zoomSettings]='zoom' [legendSettings]='legend'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='x' yName='y' name='Product X' [border]='border' [animation]='animation' opacity=0.3></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public border?: Object;
    public zoom?: Object;
    public animation?: Object;
    public legend?: Object;
    ngOnInit(): void {
        this.chartData = series1;
        this.primaryXAxis = {
            valueType: 'DateTime',
            labelFormat: 'yMMM',
        };
        this.zoom = {
            enableMouseWheelZooming: true,
            enablePinchZooming: true,
            enableSelectionZooming: true
        };
        this.animation = { enable: false};
        this.legend = { visible: false };

    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Note: To use zooming feature, inject ZoomService into the NgModule.providers.

After zooming, a toolbar is displayed that includes zoom, zoomin, zoomout, pan, and reset buttons.
Selecting Pan allows the chart to be panned, and selecting Reset restores the chart to its original zoom state.

Modes

The mode property in zoomSettings specifies whether zooming can be applied along the horizontal axis, vertical axis, or both. The default value is XY.

The supported zooming modes are:

X – Allows zooming along the horizontal axis.
Y – Allows zooming along the vertical axis.
XY – Allows zooming along both horizontal and vertical axes.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, AreaSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, ZoomService } from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { series1 } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, AreaSeriesService, LegendService, ZoomService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [zoomSettings]='zoom' [legendSettings]='legend'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='x' yName='y' name='Product X' [border]='border' [animation]='animation' opacity=0.3></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public primaryYAxis?: Object;
    public zoom?: Object;
    public animation?: Object;
    public legend?: Object;
title: any;
border: any;
    ngOnInit(): void {
        this.chartData = series1;
        this.primaryXAxis = {
            valueType: 'DateTime',
            labelFormat: 'yMMM',
        };
        this.zoom = {
            enableSelectionZooming: true,
              mode: 'X'
        };
        this.animation = { enable: false};
        this.legend = { visible: false };

    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

By default, the zoomin, zoomout, pan, and reset buttons are displayed when the chart is zoomed. The toolbar contents can be customized by using the toolbarItems property.
Additionally, the zooming toolbar can be displayed during initial rendering by setting the showToolbar property to true.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, AreaSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, ZoomService } from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { series1 } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, AreaSeriesService, LegendService, ZoomService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [zoomSettings]='zoom' [legendSettings]='legend'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='x' yName='y' name='Product X' [border]='border' [animation]='animation' opacity=0.3></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public primaryYAxis?: Object;
    public zoom?: Object;
    public animation?: Object;
    public legend?: Object;
title: any;
border: any;
    ngOnInit(): void {
        this.chartData = series1;
        this.primaryXAxis = {
            valueType: 'DateTime',
            labelFormat: 'yMMM',
        };
        this.zoom = {
            enableSelectionZooming: true,
            toolbarItems: ['Zoom', 'Pan', 'Reset'],
            showToolbar: true
        };
        this.animation = { enable: false};
        this.legend = { visible: false };

    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The zoom toolbar position can be customized by using the toolbarPosition property. This property supports horizontal alignments (Near, Center, and Far) and vertical alignments (Top, Middle, and Bottom). The default values are Far for horizontal alignment and Top for vertical alignment.
For precise placement, the x and y properties can be used.
Enabling the draggable property allows the toolbar to be repositioned freely within the chart area.

app.component.ts
main.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { DateTimeService, AreaSeriesService, LegendService, ZoomService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { series1 } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [DateTimeService, AreaSeriesService, LegendService, ZoomService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [chartArea]='chartArea' [title]='title' [zoomSettings]='zoomSettings' [legendSettings]='legendSettings'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='x' yName='y' name='Product X' [border]='border' [animation]='animation'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public chartData?: Object[];
    public chartArea?: Object;
    public title?: string;
    public border?: Object;
    public animation?: Object;
    public zoomSettings?: Object;
    public legendSettings?: Object;
    ngOnInit(): void {
        this.chartData = series1;
        this.primaryXAxis = {
            title: 'Years',
            valueType: 'DateTime',
            labelFormat: 'yMMM',
            edgeLabelPlacement: 'Shift',
            majorGridLines: { width: 0 }
        };
        this.primaryYAxis = {
            title: 'Profit ($)',
            rangePadding: 'None',
            lineStyle: { width: 0 },
            majorTickLines: { width: 0 }
        };
        this.zoomSettings = {
            enableSelectionZooming: true,
            toolbarItems: ['Zoom', 'Pan', 'Reset'],
            showToolbar: true,
            toolbarPosition: {
                y: -10,
                draggable: true,
                horizontalAlignment: "Far",
                verticalAlignment: "Top"
            }
        };
        this.title = 'Sales History of Product X';
        this.legendSettings = { visible: false };
        this.chartArea = { border: { width: 0 } };
        this.border = { width: 0.5, color: '#00bdae' };
        this.animation = { enable: false };
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable pan

Using enablePan property you can able to pan the zoomed chart without help of toolbar items.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, AreaSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, ZoomService } from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { series1 } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, AreaSeriesService, LegendService, ZoomService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [zoomSettings]='zoom' [legendSettings]='legend'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='x' yName='y' name='Product X' [border]='border' [animation]='animation' opacity=0.3></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public primaryYAxis?: Object;
    public zoom?: Object;
    public animation?: Object;
    public legend?: Object;
title: any;
border: any;
    ngOnInit(): void {
        this.chartData = series1;
        this.primaryXAxis = {
            valueType: 'DateTime',
            labelFormat: 'yMMM',
            zoomFactor: 0.2, zoomPosition: 0.6
        };
        this.zoom = {
            enableSelectionZooming: true,
            enablePan: true
        };
        this.animation = { enable: false};
        this.legend = { visible: false };

    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable scrollbar

By using the enableScrollbar property, a scrollbar can be displayed for the zoomed chart. This scrollbar supports both zooming and panning interactions.
Scrollbar appearance can be customized using properties within scrollbarSettings. For example:

trackColor and trackRadius control the track appearance.
scrollbarColor and scrollbarRadius customize the scroller.
Zooming through the scrollbar can be enabled or disabled using enableZoom.
The grip color and scrollbar height can be customized using gripColor and height.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, AreaSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, ZoomService, ScrollBarService } from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { series1 } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, AreaSeriesService, LegendService, ZoomService, ScrollBarService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [zoomSettings]='zoom' [legendSettings]='legend'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='x' yName='y' name='Product X' [border]='border' [animation]='animation' opacity=0.3></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public primaryYAxis?: Object;
    public zoom?: Object;
    public animation?: Object;
    public legend?: Object;
    title: any;
    border: any;
    ngOnInit(): void {
        this.chartData = series1;
        this.primaryXAxis = {
            valueType: 'DateTime',
            labelFormat: 'yMMM',
            zoomFactor: 0.2, zoomPosition: 0.6,
            scrollbarSettings: {
                enable: true,
                enableZoom: false,
                height: 14,
                trackRadius: 8,
                scrollbarRadius: 8,
                gripColor: 'transparent',
                trackColor: 'yellow',
                scrollbarColor: 'red'
            }
        };
        this.zoom = {
            enableSelectionZooming: true,
            enableScrollbar: true
        };
        this.animation = { enable: false };
        this.legend = { visible: false };

    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Position

The position property specifies where the scrollbar is rendered. By default, both vertical and horizontal scrollbars are placed near their respective axes.
The available positions are:

Default – placeNextToAxisLine
Horizontal scrollbar – Top, Bottom
Vertical scrollbar – Left, Right
Default: placeNextToAxisLine.
Horizontal scrollbar: Available positions are Top and Bottom.
Vertical scrollbar: Available positions are Left and Right.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, AreaSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, ZoomService, ScrollBarService } from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { series1 } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, AreaSeriesService, LegendService, ZoomService, ScrollBarService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [zoomSettings]='zoom' [legendSettings]='legend'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='x' yName='y' name='Product X' [border]='border' [animation]='animation' opacity=0.3></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public primaryYAxis?: Object;
    public zoom?: Object;
    public animation?: Object;
    public legend?: Object;
    title: any;
    border: any;
    ngOnInit(): void {
        this.chartData = series1;
        this.primaryXAxis = {
            valueType: 'DateTime',
            labelFormat: 'yMMM',
            zoomFactor: 0.2, zoomPosition: 0.6,
            scrollbarSettings: {
                enable: true,
                enableZoom: false,
                height: 14,
                trackRadius: 8,
                scrollbarRadius: 8,
                gripColor: 'transparent',
                trackColor: 'yellow',
                scrollbarColor: 'red',
                position:'Bottom',
            }
        };
        this.primaryYAxis = {
            scrollbarSettings: {
                enable: true,
                enableZoom: false,
                height: 14,
                trackRadius: 8,
                scrollbarRadius: 8,
                gripColor: 'transparent',
                trackColor: 'yellow',
                scrollbarColor: 'red',
                position:'Right',
            }
        };
        this.zoom = {
            enableSelectionZooming: true,
            enableScrollbar: true
        };
        this.animation = { enable: false };
        this.legend = { visible: false };

    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable animation

Use the enableAnimation property to apply smooth animation effects during zoom operations.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, AreaSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, ZoomService } from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { series1 } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, AreaSeriesService, LegendService, ZoomService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [zoomSettings]='zoom' [legendSettings]='legend'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='x' yName='y' name='Product X' [border]='border' [animation]='animation' opacity=0.3></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public primaryYAxis?: Object;
    public zoom?: Object;
    public animation?: Object;
    public legend?: Object;
title: any;
border: any;
    ngOnInit(): void {
        this.chartData = series1;
        this.primaryXAxis = {
            valueType: 'DateTime',
            labelFormat: 'yMMM',
            zoomFactor: 0.2, zoomPosition: 0.6,
        };
        this.zoom = {
            enableSelectionZooming: true,
            enablePan: true,
            enableAnimation: true
        };
        this.animation = { enable: false};
        this.legend = { visible: false };

    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Auto interval on zooming

By using the enableAutoIntervalOnZoomingproperty, the axis interval is calculated automatically based on the current zoomed range.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, AreaSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, ZoomService } from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { series1 } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, AreaSeriesService, LegendService, ZoomService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [zoomSettings]='zoom' [legendSettings]='legend'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='x' yName='y' name='Product X' [border]='border' [animation]='animation' opacity=0.3></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public primaryYAxis?: Object;
    public zoom?: Object;
    public animation?: Object;
    public legend?: Object;
title: any;
border: any;
    ngOnInit(): void {
        this.chartData = series1;
        this.primaryXAxis = {
            valueType: 'DateTime',
            labelFormat: 'yMMM',
            enableAutoIntervalOnZooming: true
        };
        this.zoom = {
            enableSelectionZooming: true,
        };
        this.animation = { enable: false};
        this.legend = { visible: false };

    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Zooming in Angular Chart component

Enable zooming

Modes

Enable pan

Enable scrollbar

Position

Enable animation

Auto interval on zooming

How can I help you?

Zooming in Angular Chart component

Enable zooming

Modes

Toolbar

Toolbar customization

Enable pan

Enable scrollbar

Position

Enable animation

Auto interval on zooming