Zooming and Panning in Xamarin.Android Chart(SfChart)

19 Oct 20209 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#
  • [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#
  • [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:

    Show axis tooltip

    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.

    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#
  • [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#
  • [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#
  • [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#
  • [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#
  • [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#
  • [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#
  • [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#
  • [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#
  • [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#
  • [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#
  • [C#]
    
    ChartZoomPanBehavior zoomPan = new ChartZoomPanBehavior(); 
    
    zoomPan.Reset();

    See also

    How to zoom chart with respect to pinch gesture orientation