Zooming in Vue 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.

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom'
            :legendSettings='legend'>
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='Area' xName='x' yName='y' name='Product X' :border='border'
                    :animation='animation' opacity=0.3> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, AreaSeries, DateTime, Zoom } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}

const seriesData1 = series1;
const primaryXAxis = {
    valueType: 'DateTime',
    labelFormat: 'yMMM'
};
const zoom =
{
    enableMouseWheelZooming: true,
    enablePinchZooming: true,
    enableSelectionZooming: true
};
const title = 'Sales History of Product X';
const legend = { visible: false };
const border = { width: 0.5, color: '#00bdae' };
const animation = { enable: false };

provide('chart', [AreaSeries, DateTime, Zoom]);

</script>
<style>
#container {
    height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom' :legendSettings='legend'>
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='Area' xName='x' yName='y' name='Product X' :border='border' :animation='animation'
                opacity=0.3> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, AreaSeries, DateTime, Zoom } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}

export default {
name: "App",
components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData1: series1,
      primaryXAxis: {
           valueType: 'DateTime',
           labelFormat: 'yMMM'
        },
        zoom:
        {
            enableMouseWheelZooming: true,
            enablePinchZooming: true,
            enableSelectionZooming: true
        },
        title: 'Sales History of Product X',
        legend: { visible: false },
        border: { width: 0.5, color: '#00bdae' },
        animation: { enable: false }
    };
  },
  provide: {
    chart: [AreaSeries,  DateTime, Zoom]
  },
};
</script>
<style>
 #container {
    height: 350px;
 }
</style>

Note: To use the zooming feature, inject Zoom into the provide.

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.

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom'
            :legendSettings='legend'>
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='Area' xName='x' yName='y' name='Product X' :border='border'
                    :animation='animation' opacity=0.3> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, AreaSeries, DateTime, Zoom } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}


const seriesData1 = series1;
const primaryXAxis = {
    valueType: 'DateTime',
    labelFormat: 'yMMM'
};
const zoom =
{
    enableSelectionZooming: true,
    mode: 'X'
};
const title = 'Sales History of Product X';
const legend = { visible: false };
const border = { width: 0.5, color: '#00bdae' };
const animation = { enable: false };

provide('chart', [AreaSeries, DateTime, Zoom]);

</script>
<style>
#container {
    height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom' :legendSettings='legend'>
      <e-series-collection>
        <e-series :dataSource='seriesData1' type='Area' xName='x' yName='y' name='Product X' :border='border'
          :animation='animation' opacity=0.3> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, AreaSeries, DateTime, Zoom } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
  if (Math.random() > .5) {
    value += Math.random();
  } else {
    value -= Math.random();
  }
  point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
  series1.push(point1);
}

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData1: series1,
      primaryXAxis: {
        valueType: 'DateTime',
        labelFormat: 'yMMM'
      },
      zoom:
      {
        enableSelectionZooming: true,
        mode: 'X'
      },
      title: 'Sales History of Product X',
      legend: { visible: false },
      border: { width: 0.5, color: '#00bdae' },
      animation: { enable: false }
    };
  },
  provide: {
    chart: [AreaSeries, DateTime, Zoom]
  },
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Toolbar

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.

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom'>
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='Area' xName='x' yName='y' name='Product X' opacity=0.3>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, AreaSeries, DateTime, Zoom } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}

const seriesData1 = series1;
const primaryXAxis = {
    valueType: 'DateTime',
    labelFormat: 'yMMM'
};
const zoom =
{
    enableSelectionZooming: true,
    toolbarItems: ['Zoom', 'Pan', 'Reset'],
    showToolbar: true
};
const title = 'Sales History of Product X';

provide('chart', [AreaSeries, DateTime, Zoom]);

</script>
<style>
#container {
    height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom'>
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='Area' xName='x' yName='y' name='Product X' opacity=0.3>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, AreaSeries, DateTime, Zoom } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}

export default {
    name: "App",
    components: {
        "ejs-chart": ChartComponent,
        "e-series-collection": SeriesCollectionDirective,
        "e-series": SeriesDirective
    },
    data() {
        return {
            seriesData1: series1,
            primaryXAxis: {
                valueType: 'DateTime',
                labelFormat: 'yMMM'
            },
            zoom:
            {
                enableSelectionZooming: true,
                toolbarItems: ['Zoom', 'Pan', 'Reset'],
                showToolbar: true
            },
            title: 'Sales History of Product X'
        };
    },
    provide: {
        chart: [AreaSeries, DateTime, Zoom]
    },
};
</script>
<style>
#container {
    height: 350px;
}
</style>

Toolbar customization

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.

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :zoomSettings='zoom' :legendSettings='legendSettings' :chartArea='chartArea'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Area' xName='x' yName='y' name='Product X' :border='border' :animation='animation'>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, AreaSeries, DateTime, Zoom, Legend } from "@syncfusion/ej2-vue-charts";

let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}

const seriesData = series1;
const primaryXAxis = {
    title: 'Years',
    valueType: 'DateTime',
    labelFormat: 'yMMM',
    edgeLabelPlacement: 'Shift',
    majorGridLines : { width : 0 }
};
const primaryYAxis = {
    title: 'Profit ($)',
    rangePadding: 'None',
    lineStyle : { width: 0 },
    majorTickLines : {width : 0}
};
const zoom = {
    enableSelectionZooming: true,
    toolbarItems: ['Zoom', 'Pan', 'Reset'],
    showToolbar: true,
    toolbarPosition: {
        y: -10,
        draggable: true,
        horizontalAlignment: "Far",
        verticalAlignment: "Top"
    }
};
const title = 'Sales History of Product X';
const legendSettings = { visible: false };
const chartArea = { border: { width: 0 } };
const border = { width: 0.5, color: '#00bdae' };
const animation = { enable: false };

provide('chart', [AreaSeries, DateTime, Zoom, Legend]);

</script>
<style>
  #container {
    height: 350px;
  }
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :zoomSettings='zoom' :legendSettings='legendSettings' :chartArea='chartArea'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Area' xName='x' yName='y' name='Product X' :border='border' :animation='animation'>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, AreaSeries, DateTime, Zoom, Legend } from "@syncfusion/ej2-vue-charts";

let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}

export default {
    name: "App",
    components: {
        "ejs-chart": ChartComponent,
        "e-series-collection": SeriesCollectionDirective,
        "e-series": SeriesDirective
    },
    data() {
        return {
            seriesData: series1,
            primaryXAxis: {
                title: 'Years',
                valueType: 'DateTime',
                labelFormat: 'yMMM',
                edgeLabelPlacement: 'Shift',
                majorGridLines : { width : 0 }
            },
            primaryYAxis: {
                title: 'Profit ($)',
                rangePadding: 'None',
                lineStyle : { width: 0 },
                majorTickLines : {width : 0}
            },
            zoom: {
                enableSelectionZooming: true,
                toolbarItems: ['Zoom', 'Pan', 'Reset'],
                showToolbar: true,
                toolbarPosition: {
                    y: -10,
                    draggable: true,
                    horizontalAlignment: "Far",
                    verticalAlignment: "Top"
                }
            },
            title: 'Sales History of Product X',
            legendSettings: { visible: false },
            chartArea: { border: { width: 0 } },
            border: { width: 0.5, color: '#00bdae' },
            animation: { enable: false }
        };
    },
    provide: {
        chart: [AreaSeries, DateTime, Zoom, Legend]
    }
};
</script>
<style>
  #container {
    height: 350px;
  }
</style>

Enable pan

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

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom'>
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='Area' xName='x' yName='y' name='Product X' opacity=0.3>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, AreaSeries, DateTime, Zoom } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}


const seriesData1 = series1;
const primaryXAxis = {
    valueType: 'DateTime',
    labelFormat: 'yMMM',
    zoomFactor: 0.2, zoomPosition: 0.6
};
const zoom =
{
    enableSelectionZooming: true,
    enablePan: true
};
const title = 'Sales History of Product X';

provide('chart', [AreaSeries, DateTime, Zoom]);

</script>
<style>
#container {
    height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom'>
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='Area' xName='x' yName='y' name='Product X' opacity=0.3>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, AreaSeries, DateTime, Zoom } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}

export default {
    name: "App",
    components: {
        "ejs-chart": ChartComponent,
        "e-series-collection": SeriesCollectionDirective,
        "e-series": SeriesDirective
    },
    data() {
        return {
            seriesData1: series1,
            primaryXAxis: {
                valueType: 'DateTime',
                labelFormat: 'yMMM',
                zoomFactor: 0.2, zoomPosition: 0.6
            },
            zoom:
            {
                enableSelectionZooming: true,
                enablePan: true
            },
            title: 'Sales History of Product X'
        };
    },
    provide: {
        chart: [AreaSeries, DateTime, Zoom]
    },
};
</script>
<style>
#container {
    height: 350px;
}
</style>

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.

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom'>
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='Area' xName='x' yName='y' name='Product X' opacity=0.3>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, AreaSeries, DateTime, Zoom, ScrollBar } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}


const seriesData1 = series1;
const 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'
    }
};
const zoom =
{
    enableSelectionZooming: true,
    enableScrollbar: true
}
const title = 'Sales History of Product X';

provide('chart', [AreaSeries, DateTime, Zoom, ScrollBar]);

</script>
<style>
#container {
    height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom'>
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='Area' xName='x' yName='y' name='Product X' opacity=0.3>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, AreaSeries, DateTime, Zoom, ScrollBar } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}

export default {
    name: "App",
    components: {
        "ejs-chart": ChartComponent,
        "e-series-collection": SeriesCollectionDirective,
        "e-series": SeriesDirective
    },
    data() {
        return {
            seriesData1: series1,
            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'
                }
            },
            zoom:
            {
                enableSelectionZooming: true,
                enableScrollbar: true
            },
            title: 'Sales History of Product X'
        };
    },
    provide: {
        chart: [AreaSeries, DateTime, Zoom, ScrollBar]
    },
};
</script>
<style>
#container {
    height: 350px;
}
</style>

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

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis = 'primaryYAxis' :zoomSettings='zoom'>
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='Area' xName='x' yName='y' name='Product X' opacity=0.3>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, AreaSeries, DateTime, Zoom, ScrollBar } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}
const seriesData1 = series1;
const 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',
    }
},
const primaryYAxis = {
    scrollbarSettings: {
        enable: true,
        enableZoom: false,
        height: 14,
        trackRadius: 8,
        scrollbarRadius: 8,
        gripColor: 'transparent',
        trackColor: 'yellow',
        scrollbarColor: 'red',
        position: 'Right',
    }
}
const zoom =
{
    enableSelectionZooming: true,
    enableScrollbar: true
}
const title = 'Sales History of Product X';

provide('chart', [AreaSeries, DateTime, Zoom, ScrollBar]);

</script>
<style>
#container {
    height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis = 'primaryYAxis' :zoomSettings='zoom'>
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='Area' xName='x' yName='y' name='Product X' opacity=0.3>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, AreaSeries, DateTime, Zoom, ScrollBar } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}

export default {
    name: "App",
    components: {
        "ejs-chart": ChartComponent,
        "e-series-collection": SeriesCollectionDirective,
        "e-series": SeriesDirective
    },
    data() {
        return {
            seriesData1: series1,
            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',
                }
            },
            primaryYAxis: {
                scrollbarSettings: {
                    enable: true,
                    enableZoom: false,
                    height: 14,
                    trackRadius: 8,
                    scrollbarRadius: 8,
                    gripColor: 'transparent',
                    trackColor: 'yellow',
                    scrollbarColor: 'red',
                    position:'Right',
                }
            },
            zoom:
            {
                enableSelectionZooming: true,
                enableScrollbar: true
            },
            title: 'Sales History of Product X'
        };
    },
    provide: {
        chart: [AreaSeries, DateTime, Zoom, ScrollBar]
    },
};
</script>
<style>
#container {
    height: 350px;
}
</style>

Enable animation

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

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom'
            :legendSettings='legend'>
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='Area' xName='x' yName='y' name='Product X' :border='border'
                    :animation='animation' opacity=0.3> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, AreaSeries, DateTime, Zoom } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}

const seriesData1 = series1;
const primaryXAxis = {
    valueType: 'DateTime',
    labelFormat: 'yMMM',
    zoomFactor: 0.2, zoomPosition: 0.6,
};
const zoom =
{
    enableSelectionZooming: true,
    enablePan: true,
    enableAnimation: true
};
const title = 'Sales History of Product X';
const legend = { visible: false };
const border = { width: 0.5, color: '#00bdae' };
const animation = { enable: false };

provide('chart', [AreaSeries, DateTime, Zoom]);

</script>
<style>
#container {
    height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom' :legendSettings='legend'>
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='Area' xName='x' yName='y' name='Product X' :border='border' :animation='animation'
                opacity=0.3> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, AreaSeries, DateTime, Zoom } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}

export default {
name: "App",
components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData1: series1,
      primaryXAxis: {
           valueType: 'DateTime',
           labelFormat: 'yMMM',
           zoomFactor: 0.2, zoomPosition: 0.6
        },
        zoom:
        {
           enableSelectionZooming: true,
           enablePan: true
        },
        title: 'Sales History of Product X',
        legend: { visible: false },
        border: { width: 0.5, color: '#00bdae' },
        animation: { enable: false }
    };
  },
  provide: {
    chart: [AreaSeries,  DateTime, Zoom]
  },
};
</script>
<style>
 #container {
    height: 350px;
 }
</style>

Auto interval on zooming

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

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom'>
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='Area' xName='x' yName='y' name='Product X' opacity=0.3>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, AreaSeries, DateTime, Zoom } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}


const seriesData1 = series1;
const primaryXAxis = {
    valueType: 'DateTime',
    labelFormat: 'yMMM',
    enableAutoIntervalOnZooming: true
};
const zoom =
{
    enableSelectionZooming: true,
};
const title = 'Sales History of Product X';

provide('chart', [AreaSeries, DateTime, Zoom]);

</script>
<style>
#container {
    height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom'>
      <e-series-collection>
        <e-series :dataSource='seriesData1' type='Area' xName='x' yName='y' name='Product X' opacity=0.3> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, AreaSeries, DateTime, Zoom } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
  if (Math.random() > .5) {
    value += Math.random();
  } else {
    value -= Math.random();
  }
  point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
  series1.push(point1);
}

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData1: series1,
      primaryXAxis: {
        valueType: 'DateTime',
        labelFormat: 'yMMM',
        enableAutoIntervalOnZooming: true
      },
      zoom:
      {
        enableSelectionZooming: true,
      },
      title: 'Sales History of Product X'
    };
  },
  provide: {
    chart: [AreaSeries, DateTime, Zoom]
  },
};
</script>
<style>
#container {
  height: 350px;
}
</style>