Zooming and Panning

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 ChartBehaviors collection property of SfChart.

Following properties are used to configure the zooming feature,

NOTE

EnableDirectionalZooming is not supported in the macOS platform.

Following code snippet illustrates how to enable zooming.

<chart:SfChart>

	<chart:SfChart.ChartBehaviors>
	
		<chart:ChartZoomPanBehavior/>
		
	</chart:SfChart.ChartBehaviors>
	
</chart:SfChart>
SfChart chart = new SfChart();

ChartZoomPanBehavior zoomPanBehavior = new ChartZoomPanBehavior();

chart.ChartBehaviors.Add(zoomPanBehavior);

Following code snippet illustrates how to enable the box selection zooming,

<chart:SfChart>

	<chart:SfChart.ChartBehaviors>

		<chart:ChartZoomPanBehavior EnableSelectionZooming="True"/>

	</chart:SfChart.ChartBehaviors>

</chart:SfChart>
SfChart chart = new SfChart();

ChartZoomPanBehavior zoomPanBehavior = new ChartZoomPanBehavior();

zoomPanBehavior.EnableSelectionZooming = true;

chart.ChartBehaviors.Add(zoomPanBehavior);

Following screenshot shows the box selection on chart area,

Box selection support in Xamarin.Forms Chart

Following screenshot shows the zoomed area,

Panning support in Xamarin.Forms 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).

Following code example illustrates how to restrict the chart to be zoomed only along horizontal axis,

<chart:SfChart.ChartBehaviors>

	<chart:ChartZoomPanBehavior ZoomMode="X"/>

</chart:SfChart.ChartBehaviors>
ChartZoomPanBehavior zoomPanBehavior = new ChartZoomPanBehavior();

zoomPanBehavior.ZoomMode = ZoomMode.X;

Zoom mode support in Xamarin.Forms Chart

Auto Interval On Zooming

EnableAutoIntervalOnZooming property determines the update of axis internal based on the current visible range while zooming the chart. Default value of this property is true. If this property is false, the nice internal will not be calculated for new range after zoom in and actual interval will be sustained.

Events

ZoomStart

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

  • Axis – 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.

  • Axis – 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.

  • Axis – 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.

  • Axis – 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.

  • Axis – 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

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

    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)

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

  • c#
  • ChartZoomPanBehavior zoomPan = new ChartZoomPanBehavior();
    
    zoomPan.Zoom(0.5f);

    Zoom(Rect)

    Zoom(Rect) method is used to zoom the chart for a given rectangle value. Create an instance of Rect by passing Top, Left, Bottom, and Right positions and pass it to zoom method.

  • c#
  • ChartZoomPanBehavior zoomPan = new ChartZoomPanBehavior();
    
    zoomPan.Zoom(new Rect(10, 10, 200, 350));

    Zoom(chartAxis, cumulativeLevel, origin)

    Zoom(chartAxis, cumulativeLevel, origin) method is used to change the zoom level of given axis to the specified level and origin.

  • c#
  • ChartZoomPanBehavior zoomPan = new ChartZoomPanBehavior();
    
    zoomPan.Zoom(axis, 0.5f, 0.5f);

    ZoomByRange

    ZoomByRange(chartAxis, start, end)

    ZoomByRange(chartAxis, start, end) method is used to zoom the given axis to the given range.

  • c#
  • ChartZoomPanBehavior zoomPan = new ChartZoomPanBehavior();
    
    zoomPan.ZoomByRange(axis, 20, 25);

    ZoomByRange(dateTimeAxis, start, end)

    ZoomByRange(dateTimeAxis, start, end) method is used to zoom the given axis to the 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)

    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

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

  • c#
  • ChartZoomPanBehavior zoomPan = new ChartZoomPanBehavior();
    
    zoomPan.Reset();

    Override Methods

    The following override methods are available in ChartZoomPanBehavior to customize zooming actions.

    • OnScaleStart - It gets called when the user start to zoom on the chart.
    • OnScaleDelta - It gets called while performing the zoom action.
    • OnScaleEnd - It gets called after end the zoom action.
    • OnScroll - It gets called while scrolling the chart.
  • c#
  • public class ChartZoomPanBehaviorExt : ChartZoomPanBehavior
     {
            protected override void OnScaleStart(float manipulationX, float manipulationY, float scaleFactor)
            {
                base.OnScaleStart(manipulationX, manipulationY, scaleFactor);
            }
    
            protected override void OnScaleDelta(float manipulationX, float manipulationY, float scaleFactor)
            {
                base.OnScaleDelta(manipulationX, manipulationY, scaleFactor);
            }
    
            protected override void OnScaleEnd(float manipulationX, float manipulationY, float scaleFactor)
            {
                base.OnScaleEnd(manipulationX, manipulationY, scaleFactor);
            }
    
            protected override void OnScroll(float pointX, float pointY, float distanceX, float distanceY)
            {
                base.OnScroll(pointX, pointY, distanceX, distanceY);
            }
     }