Class ChartZoomPanBehavior

ZoomPanBehavior enables zooming and panning operations over a cartesian chart.

Inheritance
System.Object
ChartBehavior
ChartZoomPanBehavior
Inherited Members
Namespace: Syncfusion.Maui.Toolkit.Charts
Assembly: Syncfusion.Maui.Toolkit.dll
Syntax
public class ChartZoomPanBehavior : ChartBehavior
Remarks

To enable the zooming and panning in the chart, create an instance of ChartZoomPanBehavior and set it to the ZoomPanBehavior property of SfCartesianChart.

Examples
    <chart:SfCartesianChart>

          <chart:SfCartesianChart.ZoomPanBehavior>
              <chart:ChartZoomPanBehavior />
          </chart:SfCartesianChart.ZoomPanBehavior>

    </chart:SfCartesianChart>

Constructors

ChartZoomPanBehavior()

Initializes a new instance of the ChartZoomPanBehavior class.

Declaration
public ChartZoomPanBehavior()

Fields

EnableDirectionalZoomingProperty

Identifies the EnableDirectionalZooming bindable property.

Declaration
public static readonly BindableProperty EnableDirectionalZoomingProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The identifier for the EnableDirectionalZooming bindable property determines whether directional zooming is enabled for the chart.

EnableDoubleTapProperty

Identifies the EnableDoubleTap bindable property.

Declaration
public static readonly BindableProperty EnableDoubleTapProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The identifier for the EnableDoubleTap bindable property determines whether double-tap zooming is enabled for the chart.

EnablePanningProperty

Identifies the EnablePanning bindable property.

Declaration
public static readonly BindableProperty EnablePanningProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The identifier for the EnablePanning bindable property determines whether panning is enabled for the chart.

EnablePinchZoomingProperty

Identifies the EnablePinchZooming bindable property.

Declaration
public static readonly BindableProperty EnablePinchZoomingProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The identifier for the EnablePinchZooming bindable property determines whether pinch zooming is enabled for the chart.

EnableSelectionZoomingProperty

Identifies the EnableSelectionZooming bindable property.

Declaration
public static readonly BindableProperty EnableSelectionZoomingProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The identifier for the EnableSelectionZooming bindable property determines whether selection zooming is enabled for the chart.

MaximumZoomLevelProperty

Identifies the MaximumZoomLevel bindable property.

Declaration
public static readonly BindableProperty MaximumZoomLevelProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The identifier for the MaximumZoomLevel bindable property determines the maximum zoom level for the chart.

SelectionRectFillProperty

Identifies the SelectionRectFill bindable property.

Declaration
public static readonly BindableProperty SelectionRectFillProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The identifier for the SelectionRectFill bindable property determines the fill color of the selection rectangle.

SelectionRectStrokeDashArrayProperty

Identifies the SelectionRectStrokeDashArray bindable property.

Declaration
public static readonly BindableProperty SelectionRectStrokeDashArrayProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The identifier for the SelectionRectStrokeDashArray bindable property determines the dash array of the selection rectangle's stroke.

SelectionRectStrokeProperty

Identifies the SelectionRectStroke bindable property.

Declaration
public static readonly BindableProperty SelectionRectStrokeProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The identifier for the SelectionRectStroke bindable property determines the stroke color of the selection rectangle.

SelectionRectStrokeWidthProperty

Identifies the SelectionRectStrokeWidth bindable property.

Declaration
public static readonly BindableProperty SelectionRectStrokeWidthProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The identifier for the SelectionRectStrokeWidth bindable property determines the stroke width of the selection rectangle.

ZoomModeProperty

Identifies the ZoomMode bindable property.

Declaration
public static readonly BindableProperty ZoomModeProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The identifier for the ZoomMode bindable property determines the zoom mode of the chart, which in turn defines the direction of zooming.

Properties

EnableDirectionalZooming

Gets or sets a value indicating whether zooming is enabled using the direction of the axis.

Declaration
public bool EnableDirectionalZooming { get; set; }
Property Value
Type Description
System.Boolean

It accept the bool values and the default value is false.
Examples
<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior EnablePinchZooming = "True" 
                                   EnableDirectionalZooming = "True"/>
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"/>

</chart:SfCartesianChart>

EnableDoubleTap

Gets or sets a value indicating whether zooming is enabled through double tapping.

Declaration
public bool EnableDoubleTap { get; set; }
Property Value
Type Description
System.Boolean

It accepts the bool values and the default value is true.
Examples
<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior EnableDoubleTap = "True" />
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"/>

</chart:SfCartesianChart>

EnablePanning

Gets or sets a value indicating whether the panning is enabled.

Declaration
public bool EnablePanning { get; set; }
Property Value
Type Description
System.Boolean

It accepts the bool values and the default value is true.
Examples
<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior EnablePanning = "True" />
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"/>

</chart:SfCartesianChart>

EnablePinchZooming

Gets or sets a value indicating whether the finger gesture is enabled or disabled.

Declaration
public bool EnablePinchZooming { get; set; }
Property Value
Type Description
System.Boolean

It accepts the bool values and its default value is true.
Remarks

If this property is true, zooming is performed based on the pinch gesture of the user. If this property is false, zooming is performed based on the mouse wheel of the user.

Examples
<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior EnablePinchZooming="True"/>
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"/>

</chart:SfCartesianChart>

EnableSelectionZooming

Gets or sets a value indicating whether the selection zooming is enabled.

Declaration
public bool EnableSelectionZooming { get; set; }
Property Value
Type Description
System.Boolean

It accept the bool values and the default value is false.
Remarks

To show the axis trackball label while Selection Zooming, you must set the ShowTrackballLabel as True.

Examples
<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior EnableSelectionZooming = "True" />
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"/>

</chart:SfCartesianChart>

MaximumZoomLevel

Gets or sets the value that determines the maximum zoom level of the chart.

Declaration
public double MaximumZoomLevel { get; set; }
Property Value
Type Description
System.Double

It accepts double values and its default value is double.NaN.
Examples
<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior EnablePinchZooming = "True" 
                                   MaximumZoomLevel="2"/>
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"/>

</chart:SfCartesianChart>

SelectionRectFill

Gets or sets the fill color of the selection rectangle.

Declaration
public Brush SelectionRectFill { get; set; }
Property Value
Type Description
Microsoft.Maui.Controls.Brush

This property takes the Microsoft.Maui.Controls.Brush as its value.
Examples
<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior EnableSelectionZooming = "True" SelectionRectFill = "Red" />
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"/>

</chart:SfCartesianChart>

SelectionRectStroke

Gets or sets the stroke color of the selection rectangle.

Declaration
public Brush SelectionRectStroke { get; set; }
Property Value
Type Description
Microsoft.Maui.Controls.Brush

This property takes the Microsoft.Maui.Controls.Brush as its value.
Examples
<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior EnableSelectionZooming = "True" SelectionRectStroke = "Red" />
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"/>

</chart:SfCartesianChart>

SelectionRectStrokeDashArray

Gets or sets the stroke dash array for the selection zooming rectangle.

Declaration
public DoubleCollection SelectionRectStrokeDashArray { get; set; }
Property Value
Type Description
Microsoft.Maui.Controls.DoubleCollection

It accepts Microsoft.Maui.Controls.DoubleCollection values, and the default value is 5,5.
Examples
<chart:SfCartesianChart>

 <chart:SfCartesianChart.Resources>
   <DoubleCollection x:Key="dashArray">
       <x:Double>5</x:Double>
       <x:Double>2</x:Double>
   </DoubleCollection>
  </chart:SfCartesianChart.Resources>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior EnableSelectionZooming = "True" SelectionRectStrokeDashArray = "{StaticResource dashArray}" />
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"/>

</chart:SfCartesianChart>

SelectionRectStrokeWidth

Gets or sets the stroke width of the selection rectangle.

Declaration
public double SelectionRectStrokeWidth { get; set; }
Property Value
Type Description
System.Double

It accepts double values, and the default value is 1.
Examples
<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior EnableSelectionZooming = "True" SelectionRectStrokeWidth = "3" />
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"/>

</chart:SfCartesianChart>

ZoomMode

Gets or sets the mode for zooming direction.

Declaration
public ZoomMode ZoomMode { get; set; }
Property Value
Type Description
ZoomMode

It accepts the ZoomMode values and the default value is XY.
Remarks

The zooming can be done both horizontally and vertically.

Examples
<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior ZoomMode="X"/>
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"/>

</chart:SfCartesianChart>

Methods

OnTouchMove(ChartBase, Single, Single)

This method is triggered when a touch point is moved along the touch surface.

Declaration
protected override void OnTouchMove(ChartBase chart, float pointX, float pointY)
Parameters
Type Name Description
ChartBase chart
System.Single pointX
System.Single pointY
Overrides
Remarks

Use the provided points X and Y to determine the exact location of the touch.

You can use these coordinates to define the desired actions to be executed when navigating the touch point across the chart area.

Example code:

Convert the touch coordinates to value coordinates if needed. 
 
chart.ChartPointToValue(xAxis, pointY);
Show a tooltip with information about the data point. 
tooltipBehavior.Show(pointX, pointY);

OnTouchUp(ChartBase, Single, Single)

This method is triggered when a touch event comes to an end. It is used to finalize the action initiated by the OnTouchDown(ChartBase, Single, Single).

Declaration
protected override void OnTouchUp(ChartBase chart, float pointX, float pointY)
Parameters
Type Name Description
ChartBase chart
System.Single pointX
System.Single pointY
Overrides
Remarks

Use the provided points X and Y to determine the exact location of the touch.

You can use these coordinates to interact with the chart, such as highlighting data points, hiding tooltips, or performing other actions when the touch is released.

Example code:

Convert the touch coordinates to value coordinates if needed. 
 
chart.ChartPointToValue(xAxis, pointY);
Hide a tooltip with information about the data point. 
tooltipBehavior.Hide(pointX, pointY);

Reset()

Resets the zoom factor and zoom position for all the axis.

Declaration
public void Reset()

ZoomByRange(ChartAxis, Double, Double)

Zooms the chart by a specified range.

Declaration
public void ZoomByRange(ChartAxis chartAxis, double start, double end)
Parameters
Type Name Description
ChartAxis chartAxis
System.Double start
System.Double end
Remarks

This method changes the zoom position and zoom factor of the given chart axis by a specified range.

ZoomByRange(DateTimeAxis, DateTime, DateTime)

Zooms the chart by a specified range.

Declaration
public void ZoomByRange(DateTimeAxis dateTimeAxis, DateTime start, DateTime end)
Parameters
Type Name Description
DateTimeAxis dateTimeAxis
System.DateTime start
System.DateTime end
Remarks

This method changes the zoom position and zoom factor of the given date time axis by a specified range.

ZoomIn()

Zooms in on the chart.

Declaration
public void ZoomIn()
Remarks

This method increases the zoom level of the chart.

ZoomOut()

Zooms out from the chart.

Declaration
public void ZoomOut()
Remarks

This method decreases the zoom level of the chart.

ZoomToFactor(ChartAxis, Double, Double)

Zooms the chart by the specified zoom position and zoom factor.

Declaration
public void ZoomToFactor(ChartAxis chartAxis, double zoomPosition, double zoomFactor)
Parameters
Type Name Description
ChartAxis chartAxis
System.Double zoomPosition
System.Double zoomFactor
Remarks

This method changes the zoom position and zoom factor of the given chart axis.

ZoomToFactor(Double)

Zooms the chart by the specified zoom factor.

Declaration
public void ZoomToFactor(double zoomFactor)
Parameters
Type Name Description
System.Double zoomFactor
Remarks

This method changes the zoom factor of the horizontal and vertical axes.