Zooming in Angular Chart

31 Aug 202624 minutes to read

Zooming in a chart refers to the process of magnifying a portion of the chart to focus on specific segments of data that matter most.

Zooming

The minimum app.module.ts configuration required for all samples on this page is shown below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule, ZoomService } from '@syncfusion/ej2-angular-charts';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, ChartModule],
  declarations: [AppComponent],
  providers: [ZoomService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Enable Zooming

The chart can be zoomed in the following three ways.

Selection - By setting the enableSelectionZooming property to true in zoomSettings, you can zoom the chart by using the rubber band selection.
Mousewheel - By setting the enableMouseWheelZooming property to true in zoomSettings, you can zoom in and zoom out the chart by scrolling the mouse wheel.
Pinch - By setting the enablePinchZooming property to true in zoomSettings, you can zoom the chart through pinch gestures on touch-enabled devices.

Pinch zooming is supported only in browsers that support multi-touch gestures. Currently IE11, Chrome and Opera browsers support multi-touch in desktop devices.

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

app.component.ts
main.ts
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));

After zooming the chart, a zoom toolbar appears with Zoom, Zoom In, Zoom Out, Pan, and Reset buttons.
Selecting the Pan option enables panning of the chart, and selecting the Reset option restores the chart to its original zoom level.

Zoom Modes

The mode property in zoomSettings specifies whether the chart is allowed to scale along the horizontal axis or the vertical axis. The default value of the mode is XY (both axes).

The following zoom modes are available:

X - Allows you to zoom the chart horizontally.
Y - Allows you to zoom the chart vertically.
XY - Allows you to zoom the chart both vertically and horizontally.

app.component.ts
main.ts
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 Zoom In, Zoom Out, Pan, and Reset buttons are displayed in the toolbar after the chart is zoomed. You can customize the toolbar to show only the desired options using the toolbarItems property. The available toolbar items are Zoom, ZoomIn, ZoomOut, Pan, and Reset. Additionally, by using the showToolbar property, you can display the toolbar for zooming and panning the chart during initial rendering.

app.component.ts
main.ts
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 in the chart can be repositioned using the toolbarPosition property, allowing flexible alignment and placement. It supports horizontal alignments (Near, Center, and Far) and vertical alignments (Top, Middle, and Bottom), with default values set to Far and Top, respectively. For precise placement, the x and y properties (specified in pixels) can be used to adjust the toolbar’s position within the chart area. Additionally, enabling the draggable property allows users to freely move the toolbar within the chart area, ensuring optimal usability.

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

By using the enablePan property, you can enable panning of the zoomed chart directly, without selecting the Pan option in the toolbar.

app.component.ts
main.ts
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, you can add a scrollbar to the chart that allows you to zoom or pan. The appearance of the scrollbar can be customized using the properties in scrollbarSettings. For example, you can use the trackColor and trackRadius properties to customize the track of the scrollbar, and the scrollbarRadius and scrollbarColor properties to customize the scroller. The ability to zoom through the scrollbar can be enabled or disabled using the enableZoom property in scrollbarSettings. Additionally, you can change the color of the grip and the height of the scrollbar using the gripColor and height properties.

app.component.ts
main.ts
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));

Initial Scrollbar

To show the scrollbar on initial render, configure the following:

Set a zoomFactor (a numeric value between 0 and 1) on primaryXAxis.
Set the axis property isZoomed to true inside the chart’s load event handler (for example: args.axis.isZoomed = true;).
Set enableScrollbar to true in zoomSettings.

app.component.ts
main.ts
import { ChartModule, ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-angular-charts'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { PageService } from '@syncfusion/ej2-angular-grids'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { PieSeriesService, AccumulationTooltipService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import {
    LineSeriesService, DateTimeService, DataLabelService, StackingColumnSeriesService, CategoryService,
    StepAreaSeriesService, SplineSeriesService, ScrollBarService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
    SelectionService, ScatterSeriesService, ZoomService, ColumnSeriesService, AreaSeriesService, RangeAreaSeriesService
} from '@syncfusion/ej2-angular-charts'


import { Component, OnInit } from '@angular/core';
import { ILoadedEventArgs } from '@syncfusion/ej2-angular-charts';

@Component({
imports: [
         ChartModule, ChartAllModule, AccumulationChartAllModule, AccumulationChartModule, GridModule, DialogModule
    ],

providers: [LineSeriesService, DateTimeService, ColumnSeriesService, DataLabelService, ZoomService, StackingColumnSeriesService, CategoryService,
        StepAreaSeriesService, SplineSeriesService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
        PieSeriesService, AccumulationTooltipService, ScrollBarService, AccumulationDataLabelService, SelectionService, ScatterSeriesService,
        PageService, AreaSeriesService, RangeAreaSeriesService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart style='display:block' align='center' id='chartcontainer' [title]='title' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
            [tooltip]='tooltip' (load)='load($event)'[zoomSettings]='zoomSettings' >
            <e-series-collection>
                <e-series [dataSource]='chartData' type='Line' xName='x' yName='y' name='Germany' width=2 [marker]='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public primaryYAxis?: Object;
    public tooltip: Object = {
        enable: true
    };
    public load(args: ILoadedEventArgs): void {
       args.chart.zoomModule.isZoomed = true;
    };
     public zoomSettings: Object = {
        mode: 'X',
        enableMouseWheelZooming: true,
        enablePinchZooming: true,
        enableSelectionZooming: true,
        enableScrollbar: true
    };
    ngOnInit(): void {
        this.chartData =[
    { x: new Date(2005, 0, 1), y: 21 },
    { x: new Date(2006, 0, 1), y: 24 },
    { x: new Date(2007, 0, 1), y: 36 },
    { x: new Date(2008, 0, 1), y: 38 },
    { x: new Date(2009, 0, 1), y: 54 },
    { x: new Date(2010, 0, 1), y: 21 },
    { x: new Date(2011, 0, 1), y: 24 },
    { x: new Date(2012, 0, 1), y: 36 },
    { x: new Date(2013, 0, 1), y: 38 },
    { x: new Date(2014, 0, 1), y: 54 },
    { x: new Date(2015, 0, 1), y: 21 },
    { x: new Date(2016, 0, 1), y: 24 },
    { x: new Date(2017, 0, 1), y: 36 },
    { x: new Date(2018, 0, 1), y: 38 },
                ];
        this.primaryXAxis = {
        zoomFactor: 0.3,
        valueType: 'DateTime',
        labelFormat: 'y',
        intervalType: 'Years',
        edgeLabelPlacement: 'Shift',
        };
        this.primaryYAxis = {
        labelFormat: '{value}%',
        rangePadding: 'None',
        minimum: 0,
        maximum: 100,
        interval: 20,
        };
        this.marker = {  visible: true,
        height: 10,
        width: 10 };
        this.title =  'NC Weather Report - 2016';
    }
}
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 allows you to specify the preferred scrollbar location. By default, both the vertical and horizontal scrollbars are rendered next to their respective axes, which corresponds to the placeNextToAxisLine value. Using the customization options below, you can position the scrollbar as desired:

Default value: placeNextToAxisLine (scrollbar is rendered next to the axis line).
Horizontal scrollbar: Available positions are Top and Bottom.
Vertical scrollbar: Available positions are Left and Right.

app.component.ts
main.ts
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

Enable the enableAnimation property to experience smooth transitions when zooming in on the chart.

app.component.ts
main.ts
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 enableAutoIntervalOnZooming property, the axis interval is calculated automatically based on the zoomed range. Configure this property on the desired axis (for example, primaryXAxis) as shown in the following snippet:

primaryXAxis: {
  valueType: 'DateTime',
  enableAutoIntervalOnZooming: true
}

Note: When enableAutoIntervalOnZooming is enabled, any manually set interval value on the axis is ignored for the zoomed range.

app.component.ts
main.ts
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 Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Zooming in Angular Chart

Enable Zooming

Zoom Modes

Enable Pan

Enable Scrollbar

Initial Scrollbar

Position

Enable Animation

Auto Interval on Zooming

Zooming in Angular Chart

Enable Zooming

Zoom Modes

Toolbar

Toolbar customization

Enable Pan

Enable Scrollbar

Initial Scrollbar

Position

Enable Animation

Auto Interval on Zooming