Zooming and Panning in Xamarin.Android Chart(SfChart)

25 Nov 20229 minutes to read

Enable zooming

Chart allows you to zoom in to view the data clearly. To enable this feature, you need to add an instance of ChartZoomPanBehavior to the Behaviors collection property of SfChart.

The following properties are used to configure the zooming feature:

ZoomingEnabled – used to enable/disable the pinch zooming. Default value is true.
EnableDirectionalZooming - Enables or disables the pinch zooming based on pinch gesture direction. The default value of this property is false.
DoubleTapEnabled – when you enable this property, you can double tap on the chart to reset it to the original size or zoom in by one level.
ScrollingEnabled – used to enable/disable the panning. Default value is true.
MaximumZoomLevel - used to determine the maximum zoom level of the chart.

The following code snippet explains how to enable zooming.

[C#]

SfChart chart = new SfChart();
...

ChartZoomPanBehavior zoomPanBehavior = new ChartZoomPanBehavior();
chart.Behaviors.Add(zoomPanBehavior);

Selection zooming

By specifying the SelectionZoomingEnabled property to true, you can double tap and drag to select a range on the chart to be zoomed in.

The following code snippet explains how to enable the box selection zooming,

[C#]

ChartZoomPanBehavior zoomPanBehavior = new ChartZoomPanBehavior();
zoomPanBehavior.SelectionZoomingEnabled = true;

The following screenshot shows the box selection on chart area.

Box selection support in Xamarin.Android Chart

The following screenshot shows the zoomed area.

Zoomed area in Xamarin.Android Chart

Selection rectangle customization

You can customize the selection rectangle using the following properties:

SelectionRectStrokeWidth: Used to change the stroke width of selection rectangle
SelectionRectStrokeColor: Used to change the stroke color of selection rectangle.
SelectionRectPathEffect: Used to change the stroke dashes of selection rectangle.
SelectionRectFillColor: Used to change the fill color of selection rectangle.

The axis tooltip on selection zooming can be enabled using the ChartAxis.ShowTrackballInfo property. You can customize the appearance of the axis tooltip by the following properties of ChartAxis.TrackballLabelStyle.

LabelAlignment: Used to change the position of the axis label.
StrokeColor: Used to change the label border color.
StrokeWidth: Used to change the label border width.
BackgroundColor: Used to change the label background color.
MarginBottom: Specifies the bottom margin for axis label.
MarginTop: Specifies the top margin for axis label.
MarginLeft: Specifies the left margin for axis label.
MarginRight: Specifies the right margin for axis label.
TextColor: Used to change the label text color.
TextSize: Used to change the text size.
Typeface: Used to change the font family and font weight.
LabelFormat: Used to format the label.

You can customize the line color between the tooltip for the selected range while selection zooming using the chart axis TrackballAxisLabelStyle StrokeColor.

The following code snippet explains how to enable axis tooltip while selection zooming.

[C#]

SfChart chart = new SfChart (this);

NumericalAxis primaryAxis = new NumericalAxis ();
primaryAxis.ShowTrackballInfo = true;
primaryAxis.TrackballLabelStyle.LabelFormat = "##.##";
chart.PrimaryAxis = primaryAxis; 

NumericalAxis secondaryAxis = new NumericalAxis ();
secondaryAxis.ShowTrackballInfo = true;
secondaryAxis.TrackballLabelStyle.LabelFormat = "##.##";
chart.SecondaryAxis = secondaryAxis; 

ChartZoomPanBehavior zoomPanBehavior = new ChartZoomPanBehavior();
zoomPanBehavior.SelectionZoomingEnabled = true;
chart.Behaviors.Add(zoomPanBehavior);

Show axis tooltip on selection zooming in Xamarin.Android Chart

Zoom mode

The ZoomMode property specifies whether chart should be allowed to scale along horizontal axis or vertical axis or along both axis. The default value of ZoomMode is XY (both axis).

The following code example explains how to restrict the chart to be zoomed only along horizontal axis.

[C#]

ChartZoomPanBehavior zoomPanBehavior = new ChartZoomPanBehavior();
zoomPanBehavior.ZoomMode = ZoomMode.X;

Zoom mode support in Xamarin.Android Chart

Events

ZoomStart

The ZoomStart event is triggered when the user starts zooming the chart using pinch gesture, and this is a cancelable event. The argument contains the following information:

ChartAxis: The zoom start event will be triggered for all the axis in the Chart.
CurrentZoomFactor: Used to get the new zoom factor of the corresponding axis.
CurrentZoomPosition: Used to get the new zoom position of the corresponding axis.
Cancel: Used to set the value indicating whether the zooming should be canceled.

ZoomDelta

The ZoomDelta event is triggered while zooming, and this is a cancelable event. The argument contains the following information:

ChartAxis: Instance of the axis whose range is changed because of zooming. This event is triggered for each axis in the chart.
PreviousZoomFactor: Used to get the previous zoom factor of the axis.
PreviousZoomPosition: Used to get the previous zoom position of the axis.
CurrentZoomFactor: Used to get the current zoom factor of the axis.
CurrentZoomPosition: Used to get the current zoom position of the axis.
Cancel: Used to set the value indicating whether the zooming should be canceled.

ZoomEnd

The ZoomEnd event is triggered after the zooming is stopped. The argument contains the following information:

ChartAxis: Instance of the axis whose range is changed because of zooming. This event is triggered for each axis in the chart.
CurrentZoomFactor: The axis zoom factor after zoom.
CurrentZoomPosition: The axis zoom position after zoom.

SelectionZoomStart

The SelectionZoomStart event is triggered when the user starts the box selection zooming. The argument contains the following information.

ZoomRect: Used to get the initial bounds of the box selection.

SelectionZoomDelta

The SelectionZoomDelta event is triggered while selecting a region to be zoomed, and this is a cancelable event. The argument contains the following information.

ZoomRect: Contains the bounds of the currently selected region.
Cancel: Used to set the value indicating whether the box selection zooming should be canceled.

SelectionZoomEnd

The SelectionZoomEnd event is triggered after selection zooming ends. The argument contains the following information.

ZoomRect: Used to get the final bounds of the zoomed region.

Scroll

The Scroll event is triggered while panning, and this is a cancelable event. The argument contains the following information:

ChartAxis: Instance of the axis whose range is changed while panning. This event is triggered for each axis in the chart.
ZoomPosition: The current zoom position of the axis.
Cancel: Used to set a value indicating whether the scrolling should be canceled.

ResetZoom

The ResetZoom event is triggered after the chart is reset on double tap. The argument contains the following information:

ChartAxis: Instance of the axis whose range is changed because of this event. This event is triggered for each axis in the chart.
PreviousZoomFactor: Used to get the previous zoom factor.
PreviousZoomPosition: Used to get the previous zoom position.

Methods

Zooming and panning can be performed programmatically with the following methods:

ZoomIn

The ZoomIn method is used to increase the magnification of the plot area to view the data clearly.

[C#]

ChartZoomPanBehavior zoomPan = new ChartZoomPanBehavior();

zoomPan.ZoomIn();

ZoomOut

The ZoomOut is used to decrease the magnification of the plot area to reset the default view.

[C#]

ChartZoomPanBehavior zoomPan = new ChartZoomPanBehavior();

zoomPan.ZoomOut();

Zoom

Zoom (factor)

The Zoom method is used to change the zoom level by using zoom factor.

[C#]

ChartZoomPanBehavior zoomPan = new ChartZoomPanBehavior();

zoomPan.Zoom(0.5f);

Zoom (RectF)

The Zoom method is used to zoom the chart for a given rectangle value.

[C#]

ChartZoomPanBehavior zoomPan = new ChartZoomPanBehavior();

zoomPan.Zoom(new RectF(10, 10, 200, 350));

Zoom (cumulativeLevel, origin, chartAxis)

The Zoom method is used to change the zoom level of given axis to the specified level and origin.

[C#]

ChartZoomPanBehavior zoomPan = new ChartZoomPanBehavior();

zoomPan.Zoom(0.5f, 0.5f, axis);

ZoomByRange

ZoomByRange(chartAxis, start, end)

The ZoomByRange method is used to zoom the given axis to given range.

[C#]

ChartZoomPanBehavior zoomPan = new ChartZoomPanBehavior();

zoomPan.ZoomByRange(axis, 20, 25);

ZoomByRange(dateTimeAxis, start, end)

ZoomByRange method is used to zoom the given axis to given date time range.

[C#]

ChartZoomPanBehavior zoomPan = new ChartZoomPanBehavior(); 

zoomPan.ZoomByRange(axis, new DateTime(2017,3,1), new DateTime(2017,5,1));

ZoomToFactor (chartAxis, zoomPosition, zoomFactor)

The ZoomToFactor method is used to change the zoom level by using zoom position and zoom factor. Zoom position value specifies the starting point of zooming, and zoom factor value specifies the level of zooming.

[C#]

ChartZoomPanBehavior zoomPan = new ChartZoomPanBehavior(); 

zoomPan.ZoomToFactor(axis, 0.5f, 0.5f);

Reset

The Reset method is used to return the plot area back to its original position after zooming.

[C#]

ChartZoomPanBehavior zoomPan = new ChartZoomPanBehavior(); 

zoomPan.Reset();