[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Collapse]Chart Control
   [Expand]Getting Started
   [Expand]Charting Basics
   [Expand]Series Views
   [Expand]Chart Elements
   [Expand]Providing Data
   [Expand]Data Representation
   [Expand]Appearance Customization
   [Collapse]End-User Features
    [Collapse]Basic End-User Interaction
      Select and Highlight 2D Chart Elements
      Zoom and Scroll in 2D XY-Charts
      Zooming and Scrolling (3D Charts)
      Rotation (3D Charts)
    [Expand]Tooltip and Crosshair Cursor
    [Expand]Animation
     Print and Export
     Hit Information
     Chart Designer for End-Users
     Integration with a Range Control
     Chart Wizard for End-Users
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]Examples
   [Expand]Additional Resources
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[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]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Zoom and Scroll in 2D XY-Charts

This document explains how to navigate through a 2D chart. Users can scroll a chart along argument and value axes to pan a chart horizontally and vertically, and zoom a chart in/out.

Note

The WebChartControl (see WebChartControl) cannot be zoomed and scrolled.

This help file explains how to:

Expanded Allow Users to Zoom a Chart

The Chart control allows you to enable the capability to zoom a chart's x-axis, y-axis or both axes.

The code listed above uses the following API members:

Member Description
XYDiagram2D.EnableAxisXZooming Indicates whether a user can zoom a chart's x-axis.
XYDiagram2D.EnableAxisYZooming Indicates whether a user can zoom a chart's y-axis.

Use the XYDiagramPaneBase.EnableAxisXZooming and XYDiagramPaneBase.EnableAxisYZooming properties to define whether a user can zoom a diagram within a separate pane.

A chart cannot be zoomed more than the maximum zoom factor (100 times (10000%)). The mouse pointer changes to ) when a user achieves the maximum zoom. Use the ZoomingOptions2D.AxisXMaxZoomPercent and ZoomingOptions2D.AxisYMaxZoomPercent properties to specify a zoom factor's limits.

Expanded Zoom a Chart

Users can use a keyboard and/or mouse, and spread/pinch gestures on touchscreen devices to zoom a chart:

The code above uses the following API members:

Member Description
XYDiagram2D.ZoomingOptions Returns zooming options for the XY-Diagram.
ZoomingOptions.UseKeyboard Specifies whether a user can use a keyboard to zoom a chart.
ZoomingOptions.UseKeyboardWithMouse Defines whether a user can use a keyboard and/or mouse to zoom a chart.
ZoomingOptions.UseMouseWheel Defines whether a user can use a mouse wheel to zoom a chart.
ZoomingOptions.UseTouchDevice Specifies whether a user can use touchscreen devices to zoom a chart.

You can use the following actions to zoom a diagram:

Action

Effect

Press Shift and click the diagram.

The mouse pointer changes to after a user presses the Shift key. They should move the mouse pointer to the chart region they want to zoom and click the left mouse button with Shift pressed. This zooms in the diagram 3 times.

Press Alt and click the diagram.

The mouse pointer changes to after a user presses the Alt key. They should move the mouse pointer to the region to be zoomed out, and click the left mouse button with Alt pressed. The diagram is zoomed out by 3 times.

Press Shift and select a region on the diagram.

The mouse pointer changes to after a user presses the Shift key. They should use the left mouse button to select a region on a chart.

A chart is zoomed into the selected region bounds after a user releases the left mouse button.

Use Ctrl with the + or - key.

A chart's diagram is zoomed in by 20 percent from the current axis ranges if a user presses and holds the Ctrl key with the + key. A chart's diagram is zoomed out by 20 percent from the current axis ranges if a user presses and holds the Ctrl key with the - key.

Use the mouse wheel.

A user should hover a diagram with the mouse pointer and scroll the mouse wheel to zoom in/out by 20 percent from the current ranges of axes. To zoom in/out a chart by an individual axis, they should hover the axis with the mouse pointer and scroll the mouse wheel.

Use the spread or pinch gestures on a touchscreen device.

Spread or pinch gestures allow a user to zoom in and out a diagram on any touchscreen devices.

Use Ctrl + Z.

Users should press the Ctrl + Z keys to return the previous zoom state of a diagram. Note that all subsequent operations of a similar kind (for example, multiple "zoom in" operations) are considered as a single transaction. A press of Ctrl + Z returns the zoom state existed before the first zoom operation in a zoom series.

Expanded Use API to Zoom a Chart

Use the following methods to zoom in/out a chart programmatically:

Use the XYDiagram2D.ResetZoom method to set visual range values to whole range values.

The ChartControl.Zoom event allows you to track how axis ranges change when a user zooms a chart. The ChartControl.BeforeZoom event allows you to cancel a zoom via the ChartBeforeZoomEventArgs.Cancel property:

Note

A complete sample project is available at the Financial Charting demo (requires DevExpress Demo Center of version 18.2 or newer installed).

The code above uses the following API members:

Member Description
ChartControl.Zoom Occurs when a user zooms in/out of a chart.
ChartZoomEventArgs (see ChartZoomEventArgs) Provides the ChartControl.Zoom event data.
ChartControl.BeforeZoom Occurs before the chart is zoomed.
ChartBeforeZoomEventArgs (see ChartBeforeZoomEventArgs) Provides the ChartControl.BeforeZoom event data.

Expanded Allow Users to Scroll a Chart

Users can scroll a diagram to navigate on a chart when they zoom in a diagram or when an axis's visual range is less than its whole range. The Chart control allows you to enable scrolling for x and y-axis separately:

The code above uses the following API members:

Member Description
XYDiagram2D.EnableAxisXScrolling Indicates whether a user can scroll a diagram by an x-axis.
XYDiagram2D.EnableAxisYScrolling Indicates whether a user can scroll a diagram by a y-axis.

Use the XYDiagramPaneBase.EnableAxisXScrolling and XYDiagramPaneBase.EnableAxisYScrolling properties to define whether a user can scroll a diagram within a separate pane.

Expanded Scroll a Chart

Users can utilize a mouse, keyboard, scroll bars and flick gestures on touchscreen devices to move through a diagram:

The code above uses the following API members:

Member Description
XYDiagram2D.ScrollingOptions Provides access to the options specifying the ways in which scrolling can be performed for a 2D XY-Diagram.
ScrollingOptions.UseKeyboard Specifies whether a user can use a keyboard to scroll a chart.
ScrollingOptions.UseMouse Defines whether a user can use a mouse to scroll a chart.
ScrollingOptions2D.UseScrollBars Specifies whether a user can use scroll bars to scroll a chart.
ScrollingOptions2D.UseTouchDevice Defines whether a user can use touchscreen devices to scroll a chart.

The following actions scroll a diagram:

Action

Effect

Press the left mouse button or wheel button, and drag the mouse pointer.

The mouse pointer changes from to after a user holds down the left mouse button. Users should move the mouse pointer with the left mouse button pressed to scroll a diagram in the same direction as the mouse pointer is moved.

Use axes' scroll bars.

A user can click a scrollbar arrow or the scrollbar near the thumb, or drag the thumb and move it.

Use Ctrl + Arrow keys (Left, Up, Right or Down).

A diagram is moved to the left if a user presses Ctrl + Left.

A diagram is moved up if a user presses Ctrl + Up.

A diagram is moved to the right if a user presses Ctrl + Right.

A diagram is moved down if a user presses Ctrl + Down.

Use flick gestures on a touchscreen device.

Flick gestures allows a user to scroll a diagram on touchscreen devices.

Expanded Use API to Scroll a Chart

Use the XYDiagram2D.Scroll method to scroll a chart in code.

The code listed above uses the following API members:

Member Description
XYDiagram2D.Scroll Scrolls a chart in a given direction.
HorizontalScrollingDirection (see HorizontalScrollingDirection) Enumerates the possible horizontal scrolling directions.
VerticalScrollingDirection (see VerticalScrollingDirection) Enumerates the possible vertical scrolling directions.

Handle the ChartControl.Scroll event to provide a custom functionality when a chart is being scrolled.

The previously mentioned code uses the following API members:

Member Description
ChartControl.Scroll Occurs when an end-user scrolls the ChartControl.
ChartScrollEventArgs (see ChartScrollEventArgs) Provides data for the DevExpress.XtraCharts.ChartControl.Scroll event.

Expanded Customize Scroll Bar Appearance

You can change a background color of scroll bars, their border's color and thickness, and specify scroll bar position.

The following code configures scroll bar position, visibility and position:

The table below lists the API members you can use to customize scroll bars:

Member Description
XYDiagramPaneBase.ScrollBarOptions Gets the specific settings of scroll bars displayed within the pane while a user zooms or scrolls a chart.
ScrollBarOptions.XAxisScrollBarAlignment Specifies the x-axis scroll bar's alignment.
ScrollBarOptions.YAxisScrollBarAlignment Specifies the y-axis scroll bar's alignment.
ScrollBarAlignment (see ScrollBarAlignment) Lists scroll bars' alignments.
ScrollBarOptions.XAxisScrollBarVisible Gets or sets the x-axis scroll bar's visibility.
ScrollBarOptions.YAxisScrollBarVisible Gets or sets the y-axis scroll bar's visibility.
ScrollBarOptions.BarThickness Specifies scroll boxes' thickness.
ScrollBarOptions.BackColor Specifies the background color of scroll bars.
ScrollBarOptions.BarColor Gets or sets the scroll box color.
ScrollBarOptions.BorderColor Gets or sets the scroll bar border color.

Expanded Specify Keyboard Shortcuts and Mouse Actions

The Chart control allows you to assign keyboard shortcuts to the following actions:

Action Shortcut key collection
Scroll down ScrollingOptions.ScrollDownShortcuts
Scroll left ScrollingOptions.ScrollLeftShortcuts
Scroll right ScrollingOptions.ScrollRightShortcuts
Scroll up ScrollingOptions.ScrollUpShortcuts
Undo zoom ZoomingOptions.UndoZoomShortcuts
Zoom in ZoomingOptions.ZoomInShortcuts
Zoom out ZoomingOptions.ZoomOutShortcuts

The following code assigns keyboard shortcut keys to the ScrollLeft, ScrollUp, ScrollRight, and ScrollDown operations:

You can change the predefined mouse button + keyboard key combination to perform the following actions:

Action Property
Zoom in ZoomingOptions.ZoomInMouseAction
Zoom out ZoomingOptions.ZoomOutMouseAction
Zoom to rectangle ZoomingOptions2D.ZoomToRectangleMouseAction
Scroll ScrollingOptions.ScrollMouseAction

The following code specifies the ZoomIn and ZoomOut actions:

The code above uses the following API members:

Member Description
ChartMouseAction.MouseButton Gets or sets the mouse button the end user should use to interact with the chart.
ChartMouseAction.ModifierKeys Gets or sets the modifier keys.

Expanded See Also

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