Pre loader

Zoom and Pan with multiple Chart Modifiers

JavaScript Chart - Examples

SciChart.js ships with over 80 JavaScript Chart demos which you can browse, view the source code and see related documentation. Build incredible complex dashboards with SciChart.js, our High Performance JavaScript Chart Library.

Getting Started

Demonstrates different Zoom and Pan Modifiers on a JavaScript Chart using SciChart.js, High Performance JavaScript Charts

Scroll Middle Mouse button to zoom in/zoom out. Use Right Mouse Button to select an area on the chart with RubberBandXyZoomModifier. Try it out on touch devices: use pinch zoom gesture to scale.

Tips
Use ‘executeOn’ property to assign a Modifier to specific mouse button.
Use ‘easingFunction’ property to animate zoom.
Use CSS ‘touch-action’ property to override browser default touch behavior. e.g., ‘touch-action: none’.

 

MultipleZoomPanModifiers/index.tsx
View source code
Back to JavaScript Chart Examples

JavaScript Chart Examples

2D Charts

Chart Legends

3D Charts
Featured Apps
What's New

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies