• Material 3
  • Fluent
  • Bootstrap v5
  • Tailwind CSS
  • High Contrast
Preferences
Theme Selection
Theme Modes
Mode Selection
Touch
Mouse
Localization
*Translated by Google Translator.
Currency

Example of Zooming and Panning in ASP.NET MVC Chart Control

This sample demonstrates the zooming and panning features of the charts.

DEMO
SOURCE

This sample shows the following zooming and panning behaviors.

  • Click and drag the mouse on a chart area to enable selection zooming.
  • Hover the mouse over 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.

The chart component supports four types of zooming which can be set using EnableSelectionZooming, EnablePinchZooming, EnableMouseWheelZooming and EnableDeferredZooming properties.

The chart supports different mode of zooming which can be set using Mode property.

  • XY - Zoom the chart with respect to both axes.
  • X - Zoom the chart with respect to horizontal axis.
  • Y - Zoom the chart with respect to vertical axis.

More information about the zooming and panning can be found in this documentation section.

Transform your ASP.NET MVC web apps today with Syncfusion ASP.NET MVC components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE