Zooming in React Chart

17 Aug 202624 minutes to read

Zooming and panning let users explore a chart in more detail by focusing on a specific data range. The React Chart supports mouse-wheel, pinch, rubber-band selection, and toolbar-based zooming, with options to customize the toolbar, scrollbar, pan behavior, and axis interval handling. This guide covers all available zoom-related properties and interactions.

Note: To use any zoom-related feature, inject the Zoom module into the chart’s services. Also ensure the @syncfusion/ej2-react-charts package is installed.

To get started quickly with React Chart Zooming and Panning, you can check out this video:

Enable zooming

The chart supports zooming through the following three interaction methods. Each method is independent and can be combined.

Selection – Set enableSelectionZooming to true in zoomSettings to zoom using a rubber-band selection. Defaults to false.
Mouse wheel – Set enableMouseWheelZooming to true in zoomSettings to zoom in and out by scrolling the mouse wheel. Defaults to false.
Pinch – Set enablePinchZooming to true in zoomSettings to zoom using pinch gestures on touch-enabled devices. Defaults to false.

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

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, AreaSeries, Zoom } from '@syncfusion/ej2-react-charts';
import { zoomData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime' };
    const legendSettings = { visible: false };
    const zoomsettings = {
        enableMouseWheelZooming: true, enablePinchZooming: true,
        enableSelectionZooming: true
    };
    const border = { width: 0.5, color: '#00bdae' };
    const animation = { enable: false };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} legendSettings={legendSettings} zoomSettings={zoomsettings} title='Sales History of Product X'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Zoom, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={zoomData} xName='x' yName='y' opacity={0.3} name='Product X' type='Area' border={border} animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,ZoomSettingsModel,
         Legend, DateTime, Tooltip, DataLabel, AreaSeries,  Zoom}
from'@syncfusion/ej2-react-charts';
import { zoomData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime' };
  const legendSettings: LegendSettingsModel = { visible: false };
  const zoomsettings: ZoomSettingsModel = {
    enableMouseWheelZooming: true, enablePinchZooming: true,
    enableSelectionZooming: true
  };
  const border = { width: 0.5, color: '#00bdae' };
  const animation = { enable: false };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      legendSettings={legendSettings}
      zoomSettings={zoomsettings}
      title='Sales History of Product X'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Zoom, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={zoomData} xName='x' yName='y' opacity={0.3} name='Product X' type='Area'
          border={border} animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let zoomData = [
    { x: new Date(2016, 0, 1),  y: 7.1 }, 
    { x: new Date(2016, 1, 1),  y: 3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 }, 
    { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, 
    { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, 
    { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, 
    { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, 
    { x: new Date(2016, 11, 1), y: -6.8 }
];
export let zoomData: Object[] = [
    { x: new Date(2016, 0, 1),  y: 7.1 }, 
    { x: new Date(2016, 1, 1),  y: 3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 }, 
    { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, 
    { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, 
    { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, 
    { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, 
    { x: new Date(2016, 11, 1), y: -6.8 }
];

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.

Zoom modes

The mode property in zoomSettings specifies whether the chart zooms along the horizontal axis, vertical axis, or both.

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.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, AreaSeries, Zoom } from '@syncfusion/ej2-react-charts';
import { zoomData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime' };
    const legendSettings = { visible: false };
    const zoomsettings = { mode: 'X', enableSelectionZooming: true };
    const border = { width: 0.5, color: '#00bdae' };
    const animation = { enable: false };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} legendSettings={legendSettings} zoomSettings={zoomsettings} title='Sales History of Product X'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Zoom, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={zoomData} xName='x' yName='y' opacity={0.3} name='Product X' type='Area' border={border} animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,ZoomSettingsModel,
         Legend, DateTime, Tooltip, DataLabel, AreaSeries,  Zoom}
from'@syncfusion/ej2-react-charts';
import { zoomData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime' };
  const legendSettings: LegendSettingsModel = { visible: false };
  const zoomsettings: ZoomSettingsModel = { mode: 'X', enableSelectionZooming: true };
  const border = { width: 0.5, color: '#00bdae' };
  const animation = { enable: false };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      legendSettings={legendSettings}
      zoomSettings={zoomsettings}
      title='Sales History of Product X'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Zoom, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={zoomData} xName='x' yName='y' opacity={0.3} name='Product X' type='Area'
          border={border} animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let zoomData = [
    { x: new Date(2016, 0, 1),  y: 7.1 }, 
    { x: new Date(2016, 1, 1),  y: 3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 }, 
    { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, 
    { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, 
    { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, 
    { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, 
    { x: new Date(2016, 11, 1), y: -6.8 }
];
export let zoomData: Object[] = [
    { x: new Date(2016, 0, 1),  y: 7.1 }, 
    { x: new Date(2016, 1, 1),  y: 3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 }, 
    { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, 
    { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, 
    { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, 
    { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, 
    { x: new Date(2016, 11, 1), y: -6.8 }
];

By default, the ZoomIn, ZoomOut, Pan, and Reset buttons are displayed after a zoom interaction. The toolbar contents can be customized by using the toolbarItems property. Available toolbar item values include:

Zoom - Enables the zooming tool to select and zoom into a specific region of the chart.
ZoomIn - Zooms the chart in by a fixed factor.
ZoomOut - Zooms the chart out by a fixed factor.
Pan - Allows you to pan the chart.
Reset - Resets the zoomed chart.

Set showToolbar to true to display the toolbar during initial rendering. The default value is false.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, AreaSeries, Zoom } from '@syncfusion/ej2-react-charts';
import { zoomData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime' };
    const legendSettings = { visible: false };
    const zoomsettings = { enableSelectionZooming: true, toolbarItems: ['Zoom', 'Pan', 'Reset'], showToolbar: true };
    const border = { width: 0.5, color: '#00bdae' };
    const animation = { enable: false };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} legendSettings={legendSettings} zoomSettings={zoomsettings} title='Sales History of Product X'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Zoom, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={zoomData} xName='x' yName='y' name='Product X' opacity={0.3} type='Area' border={border} animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,ZoomSettingsModel,
         Legend, DateTime, Tooltip, DataLabel, AreaSeries,  Zoom}
from'@syncfusion/ej2-react-charts';
import { zoomData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime' };
  const legendSettings: LegendSettingsModel = { visible: false };
  const zoomsettings: ZoomSettingsModel = { enableSelectionZooming: true, toolbarItems: ['Zoom', 'Pan', 'Reset'], showToolbar: true };
  const border = { width: 0.5, color: '#00bdae' };
  const animation = { enable: false };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      legendSettings={legendSettings}
      zoomSettings={zoomsettings}
      title='Sales History of Product X'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Zoom, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={zoomData} xName='x' yName='y' name='Product X' opacity={0.3} type='Area'
          border={border} animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let zoomData = [
    { x: new Date(2016, 0, 1),  y: 7.1 }, 
    { x: new Date(2016, 1, 1),  y: 3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 }, 
    { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, 
    { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, 
    { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, 
    { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, 
    { x: new Date(2016, 11, 1), y: -6.8 }
];
export let zoomData: Object[] = [
    { x: new Date(2016, 0, 1),  y: 7.1 }, 
    { x: new Date(2016, 1, 1),  y: 3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 }, 
    { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, 
    { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, 
    { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, 
    { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, 
    { x: new Date(2016, 11, 1), y: -6.8 }
];

Use the toolbarPosition property to customize the zoom toolbar position. The property accepts the following horizontal and vertical alignment values:

Horizontal alignment: Near, Center, Far.
Vertical alignment: Top, Middle, Bottom.

For precise placement, use the x and y properties.
Set the draggable property to true to allow the toolbar to be repositioned freely within the chart area.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, AreaSeries, Zoom } from'@syncfusion/ej2-react-charts';
import { series1 } from './datasource';
function App() {

  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 legendSettings = { visible: false };
  const zoomsettings = { 
    enableSelectionZooming: true,
    toolbarItems: ['Zoom', 'Pan', 'Reset'],
    showToolbar: true,
    toolbarPosition: {
      y: -10,
      draggable: true,
      horizontalAlignment: "Far",
      verticalAlignment: "Top"
    }
  };
  const chartarea = { border: { width: 0 } };
  const border = { width: 0.5, color: '#00bdae' };
  const animation = { enable: false };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      legendSettings={legendSettings}
      zoomSettings={zoomsettings}
      chartArea={chartarea}
      title='Sales History of Product X'>
      <Inject services={[AreaSeries, Legend, Zoom, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={series1} xName='x' yName='y' name='Product X' opacity={0.3} type='Area' border={border} animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, LegendSettingsModel, ZoomSettingsModel, ChartAreaModel, Legend, DateTime, AreaSeries, Zoom } from'@syncfusion/ej2-react-charts';
import { series1 } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { 
    title: 'Years',
    valueType: 'DateTime',
    labelFormat: 'yMMM',
    edgeLabelPlacement: 'Shift',
    majorGridLines : { width : 0 }
  };
  const primaryyAxis: AxisModel = { 
    title: 'Profit ($)',
    rangePadding: 'None',
    lineStyle : { width: 0 },
    majorTickLines : {width : 0}
  };
  const legendSettings: LegendSettingsModel = { visible: false };
  const zoomsettings: ZoomSettingsModel = { 
    enableSelectionZooming: true,
    toolbarItems: ['Zoom', 'Pan', 'Reset'],
    showToolbar: true,
    toolbarPosition: {
      y: -10,
      draggable: true,
      horizontalAlignment: "Far",
      verticalAlignment: "Top"
    }
  };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const border = { width: 0.5, color: '#00bdae' };
  const animation = { enable: false };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      legendSettings={legendSettings}
      zoomSettings={zoomsettings}
      chartArea={chartarea}
      title='Sales History of Product X'>
      <Inject services={[AreaSeries, Legend, Zoom, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={series1} xName='x' yName='y' name='Product X' opacity={0.3} type='Area' border={border} animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export 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 let series1: Object[] = [];
let point1: Object;
let value: number = 40;
let i: number;
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);
}

Enable scrollbar

Set the enableScrollbar property to true to display a scrollbar for the zoomed chart. The scrollbar supports both zooming and panning interactions.

Customize the scrollbar appearance using properties within scrollbarSettings. For example:

trackColor and trackRadius control the track appearance.
scrollbarColor and scrollbarRadius customize the scroller.
enableZoom enables or disables zooming through the scrollbar (default is true).
gripColor and height customize the grip color and scrollbar height.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, AreaSeries, Zoom, ScrollBar } from '@syncfusion/ej2-react-charts';
import { zoomData } from './datasource';
function App() {
  const primaryxAxis = { valueType: 'DateTime', zoomFactor: 0.2, zoomPosition: 0.6, scrollbarSettings: { enable: false, enableZoom: true, height: 14, trackRadius: 8, scrollbarRadius: 8, gripColor: 'transparent', trackColor: 'yellow', scrollbarColor: 'red' } };
  const legendSettings = { visible: false };
  const zoomsettings = { enableSelectionZooming: true, enableScrollbar: true };
  const border = { width: 0.5, color: '#00bdae' };
  const animation = { enable: false };
  return <ChartComponent id='charts' primaryXAxis={primaryxAxis} legendSettings={legendSettings} zoomSettings={zoomsettings} title='Sales History of Product X'>
    <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Zoom, DateTime, ScrollBar]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={zoomData} xName='x' yName='y' name='Product X' opacity={0.3} type='Area' border={border} animation={animation}>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LegendSettingsModel, ZoomSettingsModel,
  Legend, DateTime, Tooltip, DataLabel, AreaSeries, Zoom, ScrollBar
}
  from '@syncfusion/ej2-react-charts';
import { zoomData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', zoomFactor: 0.2, zoomPosition: 0.6, scrollbarSettings: { enable: false, enableZoom: true, height: 14, trackRadius: 8, scrollbarRadius: 8, gripColor: 'transparent', trackColor: 'yellow', scrollbarColor: 'red' } };
  const legendSettings: LegendSettingsModel = { visible: false };
  const zoomsettings: ZoomSettingsModel = { enableSelectionZooming: true, enableScrollbar: true };
  const border = { width: 0.5, color: '#00bdae' };
  const animation = { enable: false };

  return <ChartComponent id='charts'
    primaryXAxis={primaryxAxis}
    legendSettings={legendSettings}
    zoomSettings={zoomsettings}
    title='Sales History of Product X'>
    <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Zoom, DateTime, ScrollBar]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={zoomData} xName='x' yName='y' name='Product X' opacity={0.3} type='Area'
        border={border} animation={animation}>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let zoomData = [
    { x: new Date(2016, 0, 1),  y: 7.1 }, 
    { x: new Date(2016, 1, 1),  y: 3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 }, 
    { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, 
    { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, 
    { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, 
    { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, 
    { x: new Date(2016, 11, 1), y: -6.8 }
];
export let zoomData: Object[] = [
    { x: new Date(2016, 0, 1),  y: 7.1 }, 
    { x: new Date(2016, 1, 1),  y: 3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 }, 
    { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, 
    { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, 
    { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, 
    { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, 
    { x: new Date(2016, 11, 1), y: -6.8 }
];

Scrollbar position

The position property specifies where the scrollbar is rendered. By default, both vertical and horizontal scrollbars are placed next to their respective axes.

The available positions are:

placeNextToAxisLine (default) - Places the scrollbar next to the axis line.
Top / Bottom - Positions the horizontal scrollbar above or below the chart.
Left / Right - Positions the vertical scrollbar to the left or right of the chart.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, AreaSeries, Zoom, ScrollBar } from '@syncfusion/ej2-react-charts';
import { zoomData } from './datasource';
function App() {
  const 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',
}};
  const primaryYAxis = {
    scrollbarSettings: {
      enable: true,
      enableZoom: false,
      height: 14,
      trackRadius: 8,
      scrollbarRadius: 8,
      gripColor: 'transparent',
      trackColor: 'yellow',
      scrollbarColor: 'red',
      position:'Right',
  }
  }
  const legendSettings = { visible: false };
  const zoomsettings = { enableSelectionZooming: true, enableScrollbar: true };
  const border = { width: 0.5, color: '#00bdae' };
  const animation = { enable: false };

  return <ChartComponent id='charts'
    primaryXAxis={primaryxAxis}
    primaryYAxis = {primaryYAxis}
    legendSettings={legendSettings}
    zoomSettings={zoomsettings}
    title='Sales History of Product X'>
    <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Zoom, DateTime, ScrollBar]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={zoomData} xName='x' yName='y' name='Product X' opacity={0.3} type='Area'
        border={border} animation={animation}>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LegendSettingsModel, ZoomSettingsModel,
  Legend, DateTime, Tooltip, DataLabel, AreaSeries, Zoom, ScrollBar
}
  from '@syncfusion/ej2-react-charts';
import { zoomData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { 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',
}};
  const primaryYAxis: AxisModel = {
    scrollbarSettings: {
      enable: true,
      enableZoom: false,
      height: 14,
      trackRadius: 8,
      scrollbarRadius: 8,
      gripColor: 'transparent',
      trackColor: 'yellow',
      scrollbarColor: 'red',
      position:'Right',
  }
  }
  const legendSettings: LegendSettingsModel = { visible: false };
  const zoomsettings: ZoomSettingsModel = { enableSelectionZooming: true, enableScrollbar: true };
  const border = { width: 0.5, color: '#00bdae' };
  const animation = { enable: false };

  return <ChartComponent id='charts'
    primaryXAxis={primaryxAxis}
    primaryYAxis = {primaryYAxis}
    legendSettings={legendSettings}
    zoomSettings={zoomsettings}
    title='Sales History of Product X'>
    <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Zoom, DateTime, ScrollBar]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={zoomData} xName='x' yName='y' name='Product X' opacity={0.3} type='Area'
        border={border} animation={animation}>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let zoomData = [
    { x: new Date(2016, 0, 1),  y: 7.1 }, 
    { x: new Date(2016, 1, 1),  y: 3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 }, 
    { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, 
    { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, 
    { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, 
    { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, 
    { x: new Date(2016, 11, 1), y: -6.8 }
];
export let zoomData: Object[] = [
    { x: new Date(2016, 0, 1),  y: 7.1 }, 
    { x: new Date(2016, 1, 1),  y: 3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 }, 
    { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, 
    { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, 
    { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, 
    { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, 
    { x: new Date(2016, 11, 1), y: -6.8 }
];

Enable animation

Set enableAnimation to true to animate zoom operations.

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,ZoomSettingsModel,
         Legend, DateTime, Tooltip, DataLabel, AreaSeries,  Zoom}
from'@syncfusion/ej2-react-charts';
import { series1 } from "./datasource";

function App() {

  const primaryxAxis = {    valueType: 'DateTime',
  labelFormat: 'yMMM',
  zoomFactor: 0.2, zoomPosition: 0.6,
 };
  const legendSettings = { visible: false };
  const zoomSettings = {    enableSelectionZooming: true, enableAnimation: true ,
    enablePan: true };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      legendSettings={legendSettings}
      zoomSettings={zoomSettings}
      title='Sales History of Product X'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Zoom, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={series1}  type='Area' xName='x' yName='y' name='Product X' opacity={0.3} >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,ZoomSettingsModel,
         Legend, DateTime, Tooltip, DataLabel, AreaSeries,  Zoom}
from'@syncfusion/ej2-react-charts';
import { series1 } from "./datasource";

function App() {

  const primaryxAxis: AxisModel = {    valueType: 'DateTime',
  labelFormat: 'yMMM',
  zoomFactor: 0.2, zoomPosition: 0.6,
 };
  const legendSettings: LegendSettingsModel = { visible: false };
  const zoomSettings: ZoomSettingsModel = {    enableSelectionZooming: true, enableAnimation: true ,
    enablePan: true };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      legendSettings={legendSettings}
      zoomSettings={zoomSettings}
      title='Sales History of Product X'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Zoom, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={series1}  type='Area' xName='x' yName='y' name='Product X' opacity={0.3} >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Enable pan

Set enablePan to true to allow the zoomed chart to be panned without using the toolbar items.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, AreaSeries, Zoom } from '@syncfusion/ej2-react-charts';
import { zoomData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', zoomFactor: 0.2, zoomPosition: 0.6 };
    const legendSettings = { visible: false };
    const zoomSettings = { enableSelectionZooming: true, enablePan: true };
    const border = { width: 0.5, color: '#00bdae' };
    const animation = { enable: false };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} legendSettings={legendSettings} zoomSettings={zoomSettings} title='Sales History of Product X'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Zoom, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={zoomData} xName='x' yName='y' name='Product X' opacity={0.3} type='Area' border={border} animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,ZoomSettingsModel,
         Legend, DateTime, Tooltip, DataLabel, AreaSeries,  Zoom}
from'@syncfusion/ej2-react-charts';
import { zoomData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', zoomFactor: 0.2, zoomPosition: 0.6 };
  const legendSettings: LegendSettingsModel = { visible: false };
  const zoomSettings: ZoomSettingsModel = { enableSelectionZooming: true, enablePan: true };
  const border = { width: 0.5, color: '#00bdae' };
  const animation = { enable: false };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      legendSettings={legendSettings}
      zoomSettings={zoomSettings}
      title='Sales History of Product X'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Zoom, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={zoomData} xName='x' yName='y' name='Product X' opacity={0.3} type='Area'
          border={border} animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let zoomData = [
    { x: new Date(2016, 0, 1),  y: 7.1 }, 
    { x: new Date(2016, 1, 1),  y: 3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 }, 
    { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, 
    { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, 
    { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, 
    { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, 
    { x: new Date(2016, 11, 1), y: -6.8 }
];
export let zoomData: Object[] = [
    { x: new Date(2016, 0, 1),  y: 7.1 }, 
    { x: new Date(2016, 1, 1),  y: 3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 }, 
    { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, 
    { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, 
    { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, 
    { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, 
    { x: new Date(2016, 11, 1), y: -6.8 }
];

Enable auto interval on zooming

Set enableAutoIntervalOnZooming on the axis (not on zoomSettings) to true so that the axis interval is recalculated automatically based on the current zoomed range.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, AreaSeries, Zoom } from '@syncfusion/ej2-react-charts';
import { zoomData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', enableAutoIntervalOnZooming: true };
    const legendSettings = { visible: false };
    const zoomSettings = { enableSelectionZooming: true };
    const border = { width: 0.5, color: '#00bdae' };
    const animation = { enable: false };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} legendSettings={legendSettings} zoomSettings={zoomSettings} title='Sales History of Product X'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Zoom, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={zoomData} xName='x' yName='y' name='Product X' opacity={0.3} type='Area' border={border} animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,ZoomSettingsModel,
         Legend, DateTime, Tooltip, DataLabel, AreaSeries,  Zoom}
from'@syncfusion/ej2-react-charts';
import { zoomData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', enableAutoIntervalOnZooming: true };
  const legendSettings: LegendSettingsModel = { visible: false };
  const zoomSettings: ZoomSettingsModel = { enableSelectionZooming: true };
  const border = { width: 0.5, color: '#00bdae' };
  const animation = { enable: false };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      legendSettings={legendSettings}
      zoomSettings={zoomSettings}
      title='Sales History of Product X'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Zoom, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={zoomData} xName='x' yName='y' name='Product X' opacity={0.3} type='Area'
          border={border} animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let zoomData = [
    { x: new Date(2016, 0, 1),  y: 7.1 }, 
    { x: new Date(2016, 1, 1),  y: 3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 }, 
    { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, 
    { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, 
    { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, 
    { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, 
    { x: new Date(2016, 11, 1), y: -6.8 }
];
export let zoomData: Object[] = [
    { x: new Date(2016, 0, 1),  y: 7.1 }, 
    { x: new Date(2016, 1, 1),  y: 3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 }, 
    { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, 
    { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, 
    { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, 
    { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, 
    { x: new Date(2016, 11, 1), y: -6.8 }
];

Troubleshooting

Zoom, pan, or scrollbar does not work

Make sure the Zoom module is injected into the chart’s services. Without it, all zoom-related properties are silently ignored.

Pinch zoom does not trigger on desktop

Pinch zoom requires a touch-capable device. Verify that you are testing on a real touch device or a browser emulator that supports multi-touch.

Scrollbar overlaps the axis labels

Customize the scrollbar position with the position property of scrollbarSettings, or increase the chart margin to provide more space.

Axis labels are too dense after zooming

Enable enableAutoIntervalOnZooming on the axis so the interval is recalculated based on the visible range.

Toolbar appears before the user zooms

Set showToolbar to false (the default) to keep the toolbar hidden until the chart is zoomed.

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Zooming in React Chart

Enable zooming

Zoom modes

Enable scrollbar

Scrollbar position

Enable animation

Enable pan

Enable auto interval on zooming

Troubleshooting

Zooming in React Chart

Enable zooming

Zoom modes

Zoom toolbar

Toolbar customization

Enable scrollbar

Scrollbar position

Enable animation

Enable pan

Enable auto interval on zooming

Troubleshooting