How to retrieve the axis range visible minimum and maximum values on zoom using zoom and pan key events in .NET MAUI SfCartesianChart?

3 mins read

.NET MAUI SfCartesianChart provides zoom and pan events that enable customization of the zoom behavior in charts. This article highlights the key events and demonstrates how to dynamically retrieve the axis VisibleMinimum and VisibleMaximum values during these interactions.

Zoom and Pan Events:

ZoomStart: Triggered when the user initiates a zoom action. Can be canceled to interrupt the action.
ZoomDelta: Activated during the zooming process and can be canceled.
ZoomEnd: Triggered when the zooming action finishes.
SelectionZoomStart: Occurs when the user begins box selection zooming.
SelectionZoomDelta: Activated during the process of selecting a region for zooming and can be canceled.
SelectionZoomEnd: Triggered after the selection zooming ends.
Scroll: Triggered during panning and can be canceled.
Reset: Triggered after the chart is reset by double-tapping.

Initialize SfCartesianChart:

Begin by setting up the SfCartesianChart according to the guidelines in the documentation.

Initialize ZoomPanBehavior:

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

XAML

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

<chart:AreaSeries ItemsSource="{Binding Data}"
                  XBindingPath="Year" 
                  YBindingPath="StockPrice"/>
</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();
 ....
 
chart.ZoomPanBehavior = new ChartZoomPanBehavior(); 

 AreaSeries areaSeries = new AreaSeries()
 {
      ItemsSource = new ViewModel().Data,
      XBindingPath = Year,
      YBindingPath = StockPrice,
 };
 chart.Series.Add(areaSeries);

Dynamically retrieve axis visible minimum and maximum :

To dynamically retrieve the axis visible minimum and maximum values based on user interactions, initialize the ZoomEnd and Scroll events in the SfCartesianChart. The ZoomEnd event triggers when zooming concludes, and the Scroll event triggers when panning the chart. Inside these event handlers, you can access parameters such as VisibleMinimum and VisibleMaximum of the axis. Convert these double values to DateTime objects to enable direct manipulation and visualization of date and time values.

XAML

<Label Text="Axis visible minimum:"/>
<Label Text="{Binding VisibleMinimum, StringFormat='{0: MMM d}'}" />
<Label Text="Axis visible maximum:" />
<Label Text="{Binding VisibleMaximum, StringFormat='{0: MMM d}'}"/>

<chart:SfCartesianChart ZoomEnd="Chart_ZoomEnd" Scroll="Chart_Scroll">

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

</chart:SfCartesianChart>

private void Chart_ZoomEnd(object sender, ChartZoomEventArgs e)
{
    if (e.Axis is DateTimeAxis dateTimeAxis)
    {      
        viewModel.VisibleMinimum = DateTime.FromOADate(dateTimeAxis.VisibleMinimum);
        viewModel.VisibleMaximum = DateTime.FromOADate(dateTimeAxis.VisibleMaximum);

    } 
 }
 
private void Chart_Scroll(object sender, ChartScrollEventArgs e)
{
    if (e.Axis is DateTimeAxis dateTimeAxis)
    {
        viewModel.VisibleMinimum = DateTime.FromOADate(dateTimeAxis.VisibleMinimum);
        viewModel.VisibleMaximum = DateTime.FromOADate(dateTimeAxis.VisibleMaximum);
    }
}

C# :

VerticalStackLayout views = new VerticalStackLayout();
var label1 = new Label
{
    Text = "Axis range minimum:",
};

var label2 = new Label();
label2.SetBinding(Label.TextProperty, new Binding("VisibleMinimum", stringFormat: "{0: MMM d}"));

var label3 = new Label
{
    Text = "Axis range maximum:",
};

var label4 = new Label();
label4.SetBinding(Label.TextProperty, new Binding("VisibleMaximum", stringFormat: "{0: MMM d}"));

SfCartesianChart chart = new SfCartesianChart();
chart.ZoomEnd += Chart_ZoomEnd;
chart.Scroll += Chart_Scroll;

 chart.ZoomPanBehavior = new ChartZoomPanBehavior()
 {
     EnableDoubleTap = false,
 };
....

views.Add(label1);
views.Add(label2);
views.Add(label3);
views.Add(label4);
views.Add(chart);

this.Content = views;

For more information about zoom and pan events, refer to the Zoom and Pan events UG and see the runnable demo from this Github location.

Conclusion

I hope you enjoyed how to retrieve axis range min/max values on Zoom in .NET MAUI SfCartesianChart.

Refer to our .NET MAUI Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Chart documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)