RadChartView provides zoom and scroll interactivity via the ChartPanAndZoomBehavior class. It is very simple to use and allows users to zoom in the chart plot area when there is a dense area of data points that can not be seen clearly at the normal chart scale. The scroll functionality allows moving the visible area of the chart.

In order to utilize this behavior users simply have to add it to the chart's Behaviors collection.

Example 1: Defining pan and zoom behavior

By default only the panning and zooming of the horizontal axis are enabled. You can alter this by setting the ZoomMode and PanMode properties of the ChartPanAndZoomBehavior. Both properties are of type ChartPanZoomMode and accept the following values:

None: The zooming/panning with the mouse device is disabled. You can use this value to disable the zoom functionality of the behavior.

Horizontal: The zooming/panning with the mouse device is enabled only on the horizontal axis.

Vertical: The zooming/panning with the mouse device is enabled only on the vertical axis.

Both: The zooming/panning with the mouse device is enabled both on the horizontal and vertical axes. You can use this value to removes any restrictions, thus the chart can be zoomed in both the horizontal and vertical axes.

The ZoomMode and PanMode properties can be used to restrict zooming/panning.

Example 2: Setting zoom mode

The ChartPanAndZoomBehavior works with the default axes. If the RadCartesianChart.HorizontalAxis is null, for example, the user will not be able to zoom or scroll horizontally, even though the individual series have horizontal axis (axes) defined.

The pan and zoom behavior enables drag-to-zoom and drag-to-pan functionalities. By default, when the ChartPanAndZoomBehavior is activated and you start dragging on the plot area, a zoom rectangle will be created and when the mouse is released the visible area will fit into the rectangle.

Figure 1: Drag to zoom

You can alter the drag action using the DragMode property of the behavior. Setting it to Pan will start panning, instead of zooming when you drag the mouse over the plot area. To forbid any drag actions you can set the DragMode to None.

Example 3: Setting drag mode

<telerik:ChartPanAndZoomBehavior DragMode="Pan" />

You can also specify the minimum distance between the start and end points of the drag operation that will allow the drag-to-zoom/pan action to be activated. This is controlled by the DragToZoomThreshold property.

Example 4: Setting minimum drag-to-zoom distance

<telerik:ChartPanAndZoomBehavior DragToZoomThreshold="100" />

The ChartPanAndZoomBehavior allows you to define custom key combinations that activate the panning and zooming. You can do this using the DragToZoomKeyCombinations and DragToPanKeyCombinations collections.

Example 5: Setting the left Ctrl key + mouse right button down as a combination that activates the zooming

Example 7: Canceling drag to zoom

The chart control has several properties which can be used to manually control the panning and zooming.

The Zoom property allows you to set the scale level for both axes. For example a Zoom=new Size(10,1) setting specifies that the data will be zoomed 10 times according to the horizontal axis and won't be zoomed by the vertical axis.

With the PanOffset you can specify the visible area of the chart. Note that PanOffset works with negative absolute values. For example, PanOffset=new Point(-500,0) will offset the visible area at 500px.

Figure 2: Zoom-in chart

Note that the setting the PanOffset in XAML or the constructor of the view that holds the chart won't be respected. This is because the property uses the chart's size which is not yet calculated at this point. In order to apply the offset you can set it after the chart is loaded.

Example 9: Setting pan offset in code

Figure 3: Offset visible area

The chart also provides few properties that combines the behaviors of Zoom and PanOffset.

HorizontalZoomRangeStart and HorizontalZoomRangeEnd

VerticalZoomRangeStart and VerticalZoomRangeEnd

Those properties controls the visible are of the chart by defining the start and end positions of the scrollbar of the corresponding axis. The properties work in relative units between 0 and 1. So if the start of the plot area is at 0, the end it will be at 1, and the center at 0.5. Having this in mind we can construct the same view as the one demonstrated in Figure 3 but using the zoom range properties.