How to zoom y axis or x axis alone in React Chart?

This article explains how to customize the zoom for the y-axis or x-axis individually in the React Chart.

Customize the zoom mode

You can customize the zoom mode by using the mode property in zoomSettings. The mode property in zoomSettings specifies whether the chart is allowed to scale along the horizontal axis or the vertical axis. The default value of the mode is XY for both axes.

The mode property includes the following mode options:.

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

In the following code example, the zoom mode is configured for the Y axis.

Index.js

import { createRoot } from 'react-dom/client';
import * as React from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Tooltip, DateTime, SplineAreaSeries, Zoom
     } from '@syncfusion/ej2-react-charts';

const SplineArea = () => {
return (
 <div classname="control-pane">
   <div classname="control-section">
     <chartcomponent id="charts" zoomsettings="{{" enablemousewheelzooming:="" true,="" enableselectionzooming:="" mode:="" 'y'="" }}="">
       <inject services="{[SplineAreaSeries," datetime,="" tooltip,="" zoom]}="">
       <seriescollectiondirective>
         <seriesdirective datasource="{data1}" xname="x" yname="y" type="SplineArea"></seriesdirective>
       </seriescollectiondirective>
     </inject></chartcomponent>
   </div>
 </div>
);
};
export default SplineArea;

const root = createRoot(document.getElementById('sample'));
root.render(<splinearea>);

The following screenshot illustrate the output of the above code snippet.

Screenshot:

Before Zooming	After Zooming

View Sample in Stackblitz

Conclusion

I hope you enjoyed learning how to customize zoom y axis or x axis alone in React Chart Component.

You can refer to our React Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!