[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Collapse]Charts Suite
   [Collapse]Chart Control
    [Expand]Getting Started
    [Expand]Fundamentals
    [Expand]Providing Data
    [Expand]Chart Elements
    [Expand]Appearance Customization
    [Collapse]End-User Features
     [Collapse]End-User Capabilities
       Zooming and Scrolling (2D XY-Charts)
       Zooming and Scrolling (3D Charts)
       Rotation (3D Charts)
     [Expand]Tooltip and Crosshair Cursor
      Tooltips
      Hit-Testing
      Selection
     [Expand]Animation
      Print and Export
      Chart Designer for End-Users
    [Expand]Design-Time Features
    [Expand]Examples
    [Expand]Additional Resources
   [Expand]Chart3D Control
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Zooming and Scrolling (2D XY-Charts)

This document describes how to provide the capability of scrolling and zooming for a 2D Chart. A similar functionality is available for 3D charts as well, which is explained in Zooming and Scrolling (3D Charts).

Note

To enable gesture zooming and scrolling, the ChartControl.IsManipulationEnabled property should be set to true.

This document consists of the following sections.

Expanded Zooming a Chart

Zooming can be enabled for X and Y-axes individually, using the XYDiagram2D.EnableAxisXNavigation and XYDiagram2D.EnableAxisYNavigation properties. These properties permit zooming at the diagram level, which means that by default, when these properties are enabled, zooming is allowed for all the available panes. To individually adjust the availability of zooming for each pane, use the corresponding Pane.EnableAxisXNavigation and Pane.EnableAxisYNavigation properties.

After zooming is enabled, it's possible to choose how it can be performed (using the keyboard and / or mouse, with gestures such as spread/pinch on your touchscreen device) or using the XYDiagram2D.NavigationOptions property.

To provide a custom functionality when a chart is being zoomed, handle the XYDiagram2D.Zoom event.

In addition, you can provide custom cursors for chart zooming in the ChartControl.QueryChartCursor event handler. For an example of its use, refer to How to: Display a Custom Cursor in the Chart Control.

To zoom in or out of a chart's diagram, do one of the following.

Action Effect
Press SHIFT and click the diagram. After an end-user presses the SHIFT key, the mouse pointer is changed to . Then, move the mouse pointer to the chart region to be zoomed, and click the left mouse button (holding the SHIFT key).The chart's diagram is zoomed in by 3 times.
Press ALT and click the diagram. After an end-user presses the ALT key, the mouse pointer is changed to . Then, move the mouse pointer to the region to be zoomed out, and click the left mouse button (holding the ALT key).The chart's diagram is zoomed out by 3 times.
Press SHIFT and select a region on the diagram.

After an end-user presses the SHIFT key and the mouse pointer is changed to , select a region on a chart using the left mouse button.

Then, after releasing the left mouse button, a chart is zoomed into the bounds of the selected region on a diagram.

Use CTRL with the "+" or "-" keys.

If an end-user presses and holds the CTRL key while pressing the "+" key, a chart's diagram is zoomed in 3 times from the current axes ranges.

If an end-user presses and holds the CTRL key while pressing the "-" key, a chart's diagram is zoomed out 3 times from the current axes ranges.

Use the mouse wheel. An end-user can scroll the mouse wheel to zoom in and out by 20 percent from the current axes ranges.
Use the spread or pinch gestures on a touchscreen device.

An end-user can zoom in or out a chart's diagram performing either spread or pinch gestures correspondingly on any touchscreen supported device .

Use CTRL + Z combination.

Pressing the CTRL + Z keys returns the previous zoom state of a chart's diagram.

Note

All subsequent operations of a similar kind (for instance, multiple "zoom in" operations) are considered as a single transaction. Pressing CTRL + Z returns the zoom state which existed before the first zoom operation in a zoom series.

Note

If, while pressing SHIFT, a chart no longer zooms in (and the mouse pointer is changed to ), this means that the chart is already zoomed in by 100 times (10000%), which is the maximum zoom factor possible.

When a chart is zoomed in, you can allow your end users to scroll the diagram, which is described in the next section of this document.

Expanded Scrolling a Chart

Scrolling can be enabled for an axis when a diagram is zoomed in, or when the axis visible range is reduced.

Scrolling can be enabled individually for X and Y-axes, using the XYDiagram2D.EnableAxisXNavigation and XYDiagram2D.EnableAxisYNavigation properties. These properties permit scrolling at the diagram level, which means that by default, when these properties are enabled, scrolling is allowed for all the available panes. To individually adjust the availability of scrolling for each pane, use the corresponding Pane.EnableAxisXNavigation and Pane.EnableAxisYNavigation properties.

After scrolling is enabled, it's possible to choose how it can be performed (with the mouse, keyboard, using flick gestures in your touchscreen device or using the scroll bars), using the XYDiagram2D.NavigationOptions property.

You can maintain the range in which an axis can be scrolled, using the Axis.WholeRange property.

To provide a custom functionality when a chart is being scrolled, handle the XYDiagram2D.Scroll event.

In addition, you can provide custom cursors for chart scrolling in the ChartControl.QueryChartCursor event handler. For an example of its use, refer to How to: Display a Custom Cursor in the Chart Control.

To scroll a chart's diagram, do one of the following.

Action Effect

Hold down the left mouse button and drag it.
After an end-user holds down the left mouse button, the mouse pointer is changed from to . Then, move the mouse pointer holding the left mouse button, and a chart's diagram is scrolled in the same direction as the mouse pointer is moved.
Use axes' scroll bars. An end-user is able to click a scrollbar arrow, click the scrollbar near the thumb, or drag the thumb and move it. In this instance, a chart's diagram is scrolled in the same way as controls in Windows applications.
Use CTRL + "Arrow" keys (LEFT, UP, RIGHT or DOWN). If an end-user presses CTRL + LEFT, a chart's diagram is moved to the left.
If an end-user presses CTRL + UP, a chart's diagram is moved up.
If an end-user presses CTRL + RIGHT, a chart's diagram is moved to the right.
If an end-user presses CTRL + DOWN, a chart's diagram is moved down.
Use flick gestures on a touchscreen device.

An end-user can scroll a diagram using flick gestures on a touchscreen device.

Is this topic helpful?​​​​​​​