How to retrieve the visible axis range in .NET MAUI Cartesian Chart?

3 mins read

In .NET MAUI Cartesian Chart 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);
    }
}

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;

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed how to retrieve the visible axis range in .NET MAUI Cartesian Chart.

You can refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. 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 comments section if you have any queries or require clarification. 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)