Example of Zooming and Panning in Javascript Chart Control

Zooming and Panning

This sample illustrates zooming feature in chart. The change can be zoomed by pinching or by mouse wheel.

More Details...


This sample demonstrates the zooming and panning behavior in chart. Click and drag the mouse on a chart area to enable selection zooming. Hover the mouse on the toolbar at the top right corner of chart area to switch between zooming and panning. Pinch in and pinch out the chart area to zoom in or zoom out the chart in touch enabled devices. Touch and drag to pan the chart. Double tap to reset the zoomed chart. Chart component supports four types of zooming which can be set using enableSelectionZooming, enablePinchZooming, enableMouseWheelZooming, enableDeferredZooming property. Chart supports two mode of zooming which can be set using mode property. XY - Zoom the chart with respect to both the axis. X - Zoom the chart with respect to horizontal axis. Y - Zoom the chart with respect to vertical axis. Injecting Module Chart component features are segregated into individual feature-wise modules. To use zooming, we need to inject Zoom module using Chart.Inject(Zoom) method. More information on the Zooming can be found in this documentation section.