Xceed Chart for WinForms has a built-in feature called “Data Zooming”, which allows the axis paging of a selected set of axes to be synchronized with a rectangular area specified with the mouse. This feature works with both GDI+ and OpenGL devices and does not depend on the applied projection. 

To enable data zooming you need to add an object of type DataZoomTool to the InteractivityOperationsCollection of the control, accessible via the InteractivityOperations property:

Dim dataZoomTool As DataZoomTool =  New DataZoomTool()
chartControl.InteractivityOperations.Add(dataZoomTool)

DataZoomTool dataZoomTool = new DataZoomTool();
chartControl.InteractivityOperations.Add(dataZoomTool);

This code enables data zooming with default parameters. When the end-user presses the left mouse button over the chart area and drags the mouse, a semi-transparent rectangle appears that indicates the area of the chart that will be displayed when the the mouse button is released. 

When the start position of the mouse in axis coordinates is smaller than the current position of the mouse in axis coordinates, the chart will perform a zoom-in of the axes. This means that when the end-user releases the left mouse button, the axes will be configured to display only the area of the chart selected by the user. 

By contrast, when the start position of the mouse in axis coordinates is bigger than the current position of the mouse in axis coordinates, the chart will perform a zoom-out of the axes. When zooming out, the selected area defines a range in the axis values where the current data visualized by the chart will be fit. 

The chart will paint the selected area in semi transparent blue when a zoom-in is about to occur and semi-transparent red when a zoom-out will occur.

Controlling the Zoom Axes

By default, the data zoom tool operates on the PrimaryX and PrimaryY axes. You can modify this behavior by modifying the HorizontalAxisId and VerticalAxisId properties of the DataZoomTool object. The following code for example will configure the data zoom tool to operate on the Depth and PrimaryY axes:

Dim dataZoomTool As DataZoomTool =  New DataZoomTool()
 
dataZoomTool.HorizontalAxisId = CType(StandardAxis.Depth, Integer)
dataZoomTool.VerticalAxisId = CType(StandardAxis.PrimaryY, Integer)
 
chartControl.InteractivityOperations.Clear()
chartControl.InteractivityOperations.Add(dataZoomTool)

DataZoomTool dataZoomTool = new DataZoomTool();
 
dataZoomTool.HorizontalAxisId = (int)StandardAxis.Depth;
dataZoomTool.VerticalAxisId = (int)StandardAxis.PrimaryY;
 
chartControl.InteractivityOperations.Clear();
chartControl.InteractivityOperations.Add(dataZoomTool);

You must select a pair of axes that are not collinear.

Controlling the Range of Selectable Values

The developer can also instruct the control not to allow the end-user to select an area of the chart that falls outside the current axis ruler bounds for the selected horizontal and vertical axes. This feature is turned off by default. To enable it, you need to set the ClampValuesToRuler property to true:

dataZoomTool.ClampValuesToRuler = True

dataZoomTool.ClampValuesToRuler = true;

Zoom Appearance

You can modify the default zoom-in fill effect and zoom-in area border by modifying the ZoomInFillEffect and ZoomInBorder properties, respectively:

dataZoomTool.ZoomInFillEffect.SetSolidColor(Color.FromArgb(125, Color.Navy))
dataZoomTool.ZoomInBorder.Color = Color.FromArgb(125, Color.Navy)

dataZoomTool.ZoomInFillEffect.SetSolidColor(Color.FromArgb(125, Color.Navy));
dataZoomTool.ZoomInBorder.Color = Color.FromArgb(125, Color.Navy);

Similarly, you need to touch the ZoomOutFillEffect and ZoomOutBorder properties if you want to modify the appearance of the zoom-out area.

Finally, you can instruct the chart to reset the axes to non-paged mode (default) whenever the end-user performs a zoom-out. This is done by setting the ZoomOutResetsAxes property to true:

dataZoomTool.ZoomOutResetsAxes = True

dataZoomTool.ZoomOutResetsAxes = true;

See Also

DataZoomTool