Zooming and Panning

29 Nov 20229 minutes to read

Enable Zooming

Chart supports zooming to view the data clearly. To enable this feature, you need to add an instance of SFChartZoomPanBehavior to the Behaviors collection using the AddChartBehavior method of SFChart.

Following properties are used to configure the zooming feature,

  • EnableZooming – 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.
  • EnableDoubleTap – 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.
  • EnablePanning – used to enable/disable the panning. Default value is true.
  • MaximumZoomLevel - used to determine the maximum zoom level of the chart.

Following code snippet illustrates how to enable zooming.

  • C#
    • SFChartZoomPanBehavior zoomPan = new SFChartZoomPanBehavior ();

chart.AddChartBehavior (zoomPan);

    Selection zooming

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

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

  • C#
    • SFChartZoomPanBehavior zoomPan = new SFChartZoomPanBehavior();
zoomPan.EnableSelectionZooming = true;
chart.AddChartBehavior (zoomPan);

    Following screenshot shows the box selection on chart area,

    Box selection support in Xamarin.iOS Chart

    Following screenshot shows the zoomed area,

    Zoomed area in Xamarin.iOS Chart

    Selection rectangle customization

    You can customize the selection rectangle using the below properties.

    Show axis tooltip

    The axis tooltip on selection zooming can be enabled using the SFChartAxis.TrackballLabelStyle.Visible property. You can customize the appearance of the axis tooltip by the below properties of SFChartAxis.SFChartTrackballAxisLabelStyle.

    • LabelAlignment - used to change the position of the axis label.
    • BorderColor – used to change the label border color.
    • BorderWidth – used to change the label border width.
    • BackgroundColor – used to change the label background color.
    • Color – used to change the label text color.
    • Font – used to change the label font size, family and weight.
    • LabelFormatter – used to format the label.
    • Margin - used to change the margin for label.
    • Visible – used to control the visibility of axis tooltip label.
  • C#
    • SFChart chart = new SFChart ();

SFNumericalAxis primaryAxis = new SFNumericalAxis();
primaryAxis.TrackballLabelStyle.Visible = true;
chart.PrimaryAxis = primaryAxis; 

SFNumericalAxis secondaryAxis = new SFNumericalAxis();
secondaryAxis.TrackballLabelStyle.Visible = true;
chart.SecondaryAxis = secondaryAxis; 

SFChartZoomPanBehavior zoomPan = new SFChartZoomPanBehavior();
zoomPan.EnableSelectionZooming = true;

chart.AddChartBehavior (zoomPan);

    Show axis tooltip on selection zooming in Xamarin.iOS 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 SFChartZoomMode.XY (both axis).

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

  • C#
    • SFChartZoomPanBehavior zoomPan = new SFChartZoomPanBehavior();

zoomPan.ZoomMode               = SFChartZoomMode.X;

chart.AddChartBehavior(zoomPan);

    Zoom mode support in Xamarin.iOS 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.

    Delegates

    We need to implement delegate to deal with the user interactions in chart for zooming and panning. In order to do this,you need to adopt the SFChartDelegate protocol through the class extension as shown below.

  • C#
    • public override void ViewDidLoad ()
{
    chart.Delegate = new ChartDelegate ();
}

public class ChartDelegate : SFChartDelegate
{
    public override void WillZoom (SFChart chart, SFChartZoomingInfo info)
    {

    }
}

    WillZoom

    The WillZoom delegate is called when the axis is started zooming, the argument includes the SFChartZoomingInfo which is used to get the zooming state. 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.
    • PreviousZoomFactor - used to get the previous zoom factor of the corresponding axis.
    • PreviousZoomPosition - used to get the previous zoom position of the corresponding axis.
    • Cancel - used to set the value indicating whether the zooming should be canceled.
    • State - used to get the SFChartZoomPanState of the zooming.

    DidZoom

    The DidZoom delegate is called when the axis is started zooming, the argument includes the SFChartZoomInfo which is used to get the zooming state. The argument contains the following information.

    WillPan

    The WillPan delegate is called when the axis is started zooming, the argument includes the SFChartPanningInfowhich is used to get the zooming state. The argument contains the following information.

    • Axis - the zoom start event will be triggered for all the axis in the chart.
    • CurrentZoomPosition - used to get the new zoom position of the corresponding axis.
    • PreviousZoomPosition - used to get the previous zoom position of the corresponding axis.
    • Cancel - used to set the value indicating whether the zooming should be canceled.
    • State - used to get the SFChartZoomPanState of the zooming.

    DidPan

    The DidPan delegate is called when the axis is started zooming, the argument includes the SFChartPanInfo which is used to get the zooming state. The argument contains the following information.

    WillSelectionZoom

    The WillSelectionZoom delegate is called when the axis is started zooming, the argument includes the SFChartSelectionZoomingInfo which is used to get the zooming state. 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.
    • State - used to get the SFChartZoomPanState of the zooming.

    DidSelectionZoom

    The DidSelectionZoom delegate is called when the axis is started zooming, the argument includes the SFChartSelectionZoomInfo which is used to get the zooming state. The argument contains the following information.

    DidResetZoom

    The DidResetZoom delegate is called when the axis is started zooming, the argument includes the SFChartResetZoomInfo which is used to get the zooming state. 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

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

  • C#
    • SFChartZoomPanBehavior zoomPan = new SFChartZoomPanBehavior();

zoomPan.ZoomIn();

    ZoomOut

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

  • C#
    • SFChartZoomPanBehavior zoomPan = new SFChartZoomPanBehavior();

zoomPan.ZoomOut();

    Zoom

    Zoom(factor)

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

  • C#
    • SFChartZoomPanBehavior zoomPan = new SFChartZoomPanBehavior();

zoomPan.Zoom(0.5f);

    Zoom(CGRect)

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

  • C#
    • SFChartZoomPanBehavior zoomPan = new SFChartZoomPanBehavior();

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

    Zoom(chartAxis, zoomPosition, zoomFactor)

    The Zoom(chartAxis, zoomPosition, zoomFactor) method is used to change the zoom level by using ZoomPosition and ZoomFactor. Zoom position value specifies the starting point of zooming, and zoom factor value specifies the level of zooming.

  • C#
    • SFChartZoomPanBehavior zoomPan = new SFChartZoomPanBehavior();

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

    Zoom(chartAxis, start, end)

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

  • C#
    • SFChartZoomPanBehavior zoomPan = new SFChartZoomPanBehavior();

zoomPan.Zoom(axis, 20, 25);

    ZoomWithCumulativeScale(cumulativeLevel, origin, chartAxis)

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

  • C#
    • SFChartZoomPanBehavior zoomPan = new SFChartZoomPanBehavior();

zoomPan.ZoomWithCumulativeScale(0.5, 0.5, axis);

    Reset

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

  • C#
    • SFChartZoomPanBehavior zoomPan = new SFChartZoomPanBehavior();

zoomPan.Reset();