HelpBot Assistant

How can I help you?

Zooming in EJ2 TypeScript Chart control

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.

index.ts
index.html
import { Chart, AreaSeries, Legend, Zoom, DateTime } from '@syncfusion/ej2-charts';
import { series1 } from './datasource.ts';
Chart.Inject(AreaSeries, DateTime, Legend, Zoom);

let chart: Chart = new Chart({
        primaryXAxis: {
            valueType: 'DateTime',
        },
        series: [
            {
                type: 'Area',
                dataSource: series1,
                name: 'Product X',
                xName: 'x',
                yName: 'y',
                border: { width: 0.5, color: '#00bdae' },
                animation: { enable: false }
            },
        ],
        //Zooming for chart
        zoomSettings:
        {
            enableMouseWheelZooming: true,
            enablePinchZooming: true,
            enableSelectionZooming: true
        },
        title: 'Sales History of Product X',
        legendSettings: { visible: false },
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

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.

index.ts
index.html
import { Chart, AreaSeries, Legend, Zoom, DateTime } from '@syncfusion/ej2-charts';
import { series1 } from './datasource.ts';
Chart.Inject(AreaSeries, DateTime, Legend, Zoom);

let chart: Chart = new Chart({
        primaryXAxis: {
            valueType: 'DateTime',
        },
        series: [
            {
                type: 'Area',
                dataSource: series1,
                name: 'Product X',
                xName: 'x',
                yName: 'y',
                border: { width: 0.5, color: '#00bdae' },
                animation: { enable: false }
            },
        ],
        zoomSettings:
        {
            enableSelectionZooming: true,
            //zoom mode as x
            mode: 'X'
        },
        title: 'Sales History of Product X',
        legendSettings: { visible: false },
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

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.

index.ts
index.html
import { Chart, AreaSeries, Legend, Zoom, DateTime } from '@syncfusion/ej2-charts';
import { series1 } from './datasource.ts';
Chart.Inject(AreaSeries, DateTime, Legend, Zoom);
let chart: Chart = new Chart({
        primaryXAxis: {
            valueType: 'DateTime',
        },
        series: [
            {
                type: 'Area',
                dataSource: series1,
                name: 'Product X',
                xName: 'x',
                yName: 'y',
                border: { width: 0.5, color: '#00bdae' },
                animation: { enable: false }
            },
        ],
        zoomSettings:
        {
            enableSelectionZooming: true, showToolbar: true,
            //Toolbar items for zooming toolkit
            toolbarItems: ['Zoom', 'Pan', 'Reset']
        },
        title: 'Sales History of Product X',
        legendSettings: { visible: false },
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

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.

index.ts
index.html
import { Chart, AreaSeries, Legend, Zoom, DateTime } from '@syncfusion/ej2-charts';
import { series1 } from './datasource.ts';
Chart.Inject(AreaSeries, DateTime, Legend, Zoom);
let chart: Chart = new Chart({
    chartArea : {border : {width : 0}},
    primaryXAxis: {
        title: 'Years',
        valueType: 'DateTime',
        labelFormat: 'yMMM',
        edgeLabelPlacement: 'Shift',
        majorGridLines : { width : 0 }
    },
    primaryYAxis:
    {
        title: 'Profit ($)',
        rangePadding: 'None',
        lineStyle : { width: 0 },
        majorTickLines : {width : 0}
    },
    series: [
        {
            type: 'Area',
            dataSource: series1,
            name: 'Product X',
            xName: 'x',
            yName: 'y',
            border: { width: 0.5, color: '#00bdae' },
            animation: { enable: false }
        },
    ],
    zoomSettings:
    {
        enableSelectionZooming: true,
        //toolbar items for zooming toolkit
        toolbarItems: ['Zoom', 'Pan', 'Reset'],
        showToolbar: true,
        toolbarPosition: {
            y: -10,
            draggable: true,
            horizontalAlignment: "Far",
            verticalAlignment: "Top"
        }
    },
    title: 'Sales History of Product X',
    legendSettings: { visible: false },
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

Enable pan

By using the enablePan property, the zoomed chart can be panned without using toolbar items.

index.ts
index.html
import { Chart, AreaSeries, Legend, Zoom, DateTime } from '@syncfusion/ej2-charts';
import { series1 } from './datasource.ts';
Chart.Inject(AreaSeries, DateTime, Legend, Zoom);
let chart: Chart = new Chart({
        primaryXAxis: {
            valueType: 'DateTime',
            zoomFactor: 0.2, zoomPosition: 0.6
        },
        series: [
            {
                type: 'Area',
                dataSource: series1,
                name: 'Product X',
                xName: 'x',
                yName: 'y',
                border: { width: 0.5, color: '#00bdae' },
                animation: { enable: false }
            },
        ],
        zoomSettings:
        {
            enableSelectionZooming: true,
            enablePan: true
        },
        title: 'Sales History of Product X',
        legendSettings: { visible: false },
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

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.

index.ts
index.html
import { Chart, AreaSeries, Legend, Zoom, DateTime, ScrollBar } from '@syncfusion/ej2-charts';
import { series1 } from './datasource.ts';
Chart.Inject(AreaSeries, DateTime, Legend, Zoom, ScrollBar);
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'DateTime',
        zoomFactor: 0.2, 
        zoomPosition: 0.6,
        scrollbarSettings: {
            enable: true,
            enableZoom: false,
            height: 14,
            trackRadius: 8,
            scrollbarRadius: 8,
            gripColor: 'transparent',
            trackColor: 'yellow',
            scrollbarColor: 'red'
        }
    },
    series: [
        {
            type: 'Area',
            dataSource: series1,
            name: 'Product X',
            xName: 'x',
            yName: 'y',
            border: { width: 0.5, color: '#00bdae' },
            animation: { enable: false }
        },
    ],
    zoomSettings:
    {
        enableSelectionZooming: true,
        enableScrollbar: true,
        mode: 'X'
    },
    title: 'Sales History of Product X',
    legendSettings: { visible: false },
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

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

index.ts
index.html
import { Chart, AreaSeries, Legend, Zoom, DateTime, ScrollBar } from '@syncfusion/ej2-charts';
import { series1 } from './datasource.ts';
Chart.Inject(AreaSeries, DateTime, Legend, Zoom, ScrollBar);
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'DateTime',
        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',
        }
    },
    primaryYAxis: {
        scrollbarSettings: {
            enable: true,
            enableZoom: false,
            height: 14,
            trackRadius: 8,
            scrollbarRadius: 8,
            gripColor: 'transparent',
            trackColor: 'yellow',
            scrollbarColor: 'red',
            position:'Right',
        }
    },
    series: [
        {
            type: 'Area',
            dataSource: series1,
            name: 'Product X',
            xName: 'x',
            yName: 'y',
            border: { width: 0.5, color: '#00bdae' },
            animation: { enable: false }
        },
    ],
    zoomSettings:
    {
        enableSelectionZooming: true,
        enableScrollbar: true,
        mode: 'X'
    },
    title: 'Sales History of Product X',
    legendSettings: { visible: false },
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

Enable animation

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

index.ts
index.html
import { Chart, AreaSeries, Legend, Zoom, DateTime } from '@syncfusion/ej2-charts';
import { series1 } from './datasource.ts';
Chart.Inject(AreaSeries, DateTime, Legend, Zoom);
let chart: Chart = new Chart({
        primaryXAxis: {
            valueType: 'DateTime',
            zoomFactor: 0.2, zoomPosition: 0.6
        },
        series: [
            {
                type: 'Area',
                dataSource: series1,
                name: 'Product X',
                xName: 'x',
                yName: 'y',
                border: { width: 0.5, color: '#00bdae' },
                animation: { enable: false }
            },
        ],
        zoomSettings:
        {
            enableSelectionZooming: true,
            enablePan: true,
            enableAnimation: true
        },
        title: 'Sales History of Product X',
        legendSettings: { visible: false },
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

Auto interval on zooming

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

index.ts
index.html
import { Chart, AreaSeries, Legend, Zoom, DateTime } from '@syncfusion/ej2-charts';
import { series1 } from './datasource.ts';
Chart.Inject(AreaSeries, DateTime, Legend, Zoom);
let chart: Chart = new Chart({
        primaryXAxis: {
            valueType: 'DateTime',
            enableAutoIntervalOnZooming: true
        },
        series: [
            {
                type: 'Area',
                dataSource: series1,
                name: 'Product X',
                xName: 'x',
                yName: 'y',
                border: { width: 0.5, color: '#00bdae' },
                animation: { enable: false }
            },
        ],
        zoomSettings:
        {
            enableSelectionZooming: true,
        },
        title: 'Sales History of Product X',
        legendSettings: { visible: false },
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

Note: To use the zooming feature, inject Zoom module Chart.Inject(Zoom) method.

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Zooming in EJ2 TypeScript Chart control

Enable zooming

Modes

Enable pan

Enable scrollbar

Position

Enable animation

Auto interval on zooming

How can I help you?

Zooming in EJ2 TypeScript Chart control

Enable zooming

Modes

Toolbar

Toolbar customization

Enable pan

Enable scrollbar

Position

Enable animation

Auto interval on zooming