Class ChartZoomPanBehavior

ZoomPanBehavior enables zooming and panning operations over a cartesian chart.

Inheritance

System.Object

ChartBehavior

ChartZoomPanBehavior

Inherited Members

ChartBehavior.OnTouchDown(ChartBase, Single, Single)

Namespace: Syncfusion.Maui.Charts

Assembly: Syncfusion.Maui.Charts.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.

    <chart:SfCartesianChart>

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

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();

    chart.ZoomPanBehavior = new ChartZoomPanBehavior();

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

EnableDoubleTapProperty

Identifies the EnableDoubleTap bindable property.

Declaration

public static readonly BindableProperty EnableDoubleTapProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

EnablePanningProperty

Identifies the EnablePanning bindable property.

Declaration

public static readonly BindableProperty EnablePanningProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

EnablePinchZoomingProperty

Identifies the EnablePinchZooming bindable property.

Declaration

public static readonly BindableProperty EnablePinchZoomingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

EnableSelectionZoomingProperty

Identifies the EnableSelectionZooming bindable property.

Declaration

public static readonly BindableProperty EnableSelectionZoomingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

MaximumZoomLevelProperty

Identifies the MaximumZoomLevel bindable property.

Declaration

public static readonly BindableProperty MaximumZoomLevelProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SelectionRectFillProperty

Identifies the SelectionRectFill bindable property.

Declaration

public static readonly BindableProperty SelectionRectFillProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SelectionRectStrokeDashArrayProperty

Identifies the SelectionRectStrokeDashArray bindable property.

Declaration

public static readonly BindableProperty SelectionRectStrokeDashArrayProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SelectionRectStrokeProperty

Identifies the SelectionRectStroke bindable property.

Declaration

public static readonly BindableProperty SelectionRectStrokeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SelectionRectStrokeWidthProperty

Identifies the SelectionRectStrokeWidth bindable property.

Declaration

public static readonly BindableProperty SelectionRectStrokeWidthProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ZoomModeProperty

Identifies the ZoomMode bindable property.

Declaration

public static readonly BindableProperty ZoomModeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

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

MainPage.xaml
MainPage.xaml.cs

<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>

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

// omitted for brevity
chart.ZoomPanBehavior = new ChartZoomPanBehavior() 
{ 
   EnablePinchZooming = true,
   EnableDirectionalZooming = true,
};

LineSeries series = new LineSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

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

MainPage.xaml
MainPage.xaml.cs

<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>

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

// omitted for brevity
chart.ZoomPanBehavior = new ChartZoomPanBehavior() 
{ 
   EnableDoubleTap = true,
};

LineSeries series = new LineSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

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

MainPage.xaml
MainPage.xaml.cs

<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>

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

// omitted for brevity
chart.ZoomPanBehavior = new ChartZoomPanBehavior() 
{ 
   EnablePanning = true,
};

LineSeries series = new LineSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

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

MainPage.xaml
MainPage.xaml.cs

<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>

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

// omitted for brevity
chart.ZoomPanBehavior = new ChartZoomPanBehavior() 
{ 
   EnablePinchZooming = true, 
};

LineSeries series = new LineSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

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

MainPage.xaml
MainPage.xaml.cs

<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>

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

// omitted for brevity
chart.ZoomPanBehavior = new ChartZoomPanBehavior() 
{ 
   EnableSelectionZooming = true,
};

LineSeries series = new LineSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

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

MainPage.xaml
MainPage.xaml.cs

<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>

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

// omitted for brevity
chart.ZoomPanBehavior = new ChartZoomPanBehavior() 
{ 
   EnablePinchZooming = true,
   MaximumZoomLevel=2,
};

LineSeries series = new LineSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

SelectionRectFill

Gets or sets the fill color of the selection rectangle.

Declaration

public Brush SelectionRectFill { get; set; }

Property Value

Type
Microsoft.Maui.Controls.Brush

SelectionRectStroke

Gets or sets the stroke color of the selection rectangle.

Declaration

public Brush SelectionRectStroke { get; set; }

Property Value

Type
Microsoft.Maui.Controls.Brush

SelectionRectStrokeDashArray

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

Declaration

public DoubleCollection SelectionRectStrokeDashArray { get; set; }

Property Value

Type
Microsoft.Maui.Controls.DoubleCollection

SelectionRectStrokeWidth

Gets or sets the stroke width of the selection rectangle.

Declaration

public double SelectionRectStrokeWidth { get; set; }

Property Value

Type
System.Double

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

MainPage.xaml
MainPage.xaml.cs

<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>

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

// omitted for brevity
chart.ZoomPanBehavior = new ChartZoomPanBehavior() 
{ 
   ZoomMode = ZoomMode.X,
};

LineSeries series = new LineSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

Methods

OnTouchMove(ChartBase, Single, Single)

Declaration

protected override void OnTouchMove(ChartBase chart, float pointX, float pointY)

Parameters

Type	Name	Description
ChartBase	chart
System.Single	pointX
System.Single	pointY

Overrides

ChartBehavior.OnTouchMove(ChartBase, Single, Single)

OnTouchUp(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

ChartBehavior.OnTouchUp(ChartBase, Single, Single)

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 verticle axes.