Edit this page

Scroll and Zoom

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.

[XAML] Example 1: Defining pan and zoom behavior

<telerikChart:RadCartesianChart.Behaviors>
   <telerikChart:ChartPanAndZoomBehavior />
</telerikChart:RadCartesianChart.Behaviors>

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.

[XAML] Example 2: Setting zoom mode

<telerikChart:RadCartesianChart.Behaviors>
   <telerikChart:ChartPanAndZoomBehavior ZoomMode="Both" />
</telerikChart:RadCartesianChart.Behaviors>

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.

Drag to zoom/scroll

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.

[XAML] 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.

[XAML] 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.

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

var keyCombo = new ChartKeyCombination();
keyCombo.Keys.Add(Key.LeftCtrl);
keyCombo.MouseButtons.Add(MouseButton.Right);

panAndZoomBehavior.DragToZoomKeyCombinations.Add(keyCombo);

[C#] Example 6: Setting the mouse right button down as a trigger that activates the panning

var keyCombo = new ChartKeyCombination();
keyCombo.MouseButtons.Add(MouseButton.Right);

panAndZoomBehavior.DragToPanKeyCombinations.Add(keyCombo);

The DragToZoomKeyCombinations and DragToPanKeyCombinations properties have higher priority than the DragMode property and if any combination is satisfied, a drag/pan-to-zoom operation is started.

To cancel the drag to zoom operation you can use the CancelDragToZoom() method of the behavior.

[C#] Example 7: Canceling drag to zoom

panAndZoomBehavior.CancelDragToZoom();

Manual scroll and 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.

[XAML] Example 8: Setting zoom

<telerik:RadCartesianChart Zoom="10,1">
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis/>
    </telerik:RadCartesianChart.HorizontalAxis> 
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis/>
    </telerik:RadCartesianChart.VerticalAxis>   
    <telerik:RadCartesianChart.Behaviors>
        <telerik:ChartPanAndZoomBehavior ZoomMode="Both">
        </telerik:ChartPanAndZoomBehavior>
    </telerik:RadCartesianChart.Behaviors>              
    <telerik:RadCartesianChart.Series>
        <telerik:BarSeries>
            <telerik:BarSeries.DataPoints>
                <telerik:CategoricalDataPoint Category="1" Value="10" />
                <telerik:CategoricalDataPoint Category="2" Value="4" />
                <telerik:CategoricalDataPoint Category="3" Value="7" />
                <telerik:CategoricalDataPoint Category="4" Value="11" />
                <telerik:CategoricalDataPoint Category="5" Value="15" />
                <telerik:CategoricalDataPoint Category="6" Value="10" />
                <telerik:CategoricalDataPoint Category="7" Value="4" />
                <telerik:CategoricalDataPoint Category="8" Value="7" />
                <telerik:CategoricalDataPoint Category="9" Value="11" />
                <telerik:CategoricalDataPoint Category="10" Value="15" />
            </telerik:BarSeries.DataPoints>
        </telerik:BarSeries>
    </telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>

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.

[C#] Example 9: Setting pan offset in code

private void RadCartesianChart_Loaded(object sender, RoutedEventArgs e)
{
    var chart = (RadCartesianChart)sender;
    chart.PanOffset = new Point(-500, 0);            
} 

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.

[XAML] Example 10: Using zoom range properties

<telerik:RadCartesianChart HorizontalZoomRangeStart="0.1" HorizontalZoomRangeEnd="0.2">
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis/>
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis/>
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:RadCartesianChart.Behaviors>
        <telerik:ChartPanAndZoomBehavior ZoomMode="Both">
        </telerik:ChartPanAndZoomBehavior>
    </telerik:RadCartesianChart.Behaviors>
    <telerik:RadCartesianChart.Series>
        <telerik:BarSeries>
            <telerik:BarSeries.DataPoints>
                <telerik:CategoricalDataPoint Category="1" Value="10" />
                <telerik:CategoricalDataPoint Category="2" Value="4" />
                <telerik:CategoricalDataPoint Category="3" Value="7" />
                <telerik:CategoricalDataPoint Category="4" Value="11" />
                <telerik:CategoricalDataPoint Category="5" Value="15" />
                <telerik:CategoricalDataPoint Category="6" Value="10" />
                <telerik:CategoricalDataPoint Category="7" Value="4" />
                <telerik:CategoricalDataPoint Category="8" Value="7" />
                <telerik:CategoricalDataPoint Category="9" Value="11" />
                <telerik:CategoricalDataPoint Category="10" Value="15" />
            </telerik:BarSeries.DataPoints>
        </telerik:BarSeries>
    </telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>

Mouse wheel mode

You can use the MouseWheelMode property of ChartPanAndZoomBehavior to specify how the chart will respond to mouse wheel. The property value is an enumeration that accepts the following values:

  • Default: The mouse wheel action will zoom the chart in respect to the ZoomMode property.
  • None: The mouse wheel action won't be respected. Nothing will happen.
  • Zoom: The mouse wheel action will zoom the chart both horizontally and vertically.
  • ZoomHorizontally and ZoomVertically: The mouse wheel action will zoom the chart horizontally/vertically.
  • PanHorizontally and PanVertically: The mouse wheel action will pan the chart horizontally/vertically.

[XAML] Example 11: Settings mouse wheel mode

<telerik:ChartPanAndZoomBehavior MouseWheelMode="Zoom" />

See Also