How to set the maximum zoom level for cartesian chart in .NET MAUI Toolkit?

In this article, we guide you through setting the Maximum Zoom Level in .NET MAUI Cartesian Chart using the ZoomPanBehavior property of type ChartZoomPanBehavior. By customizing the Maximum Zoom Level, you can control the extent of zooming allowed on charts, enhancing the user experience and maintaining the integrity of the chart’s data representation.

Steps to Set Maximum Zoom Level

Consider a scenario where cricket scores are recorded for 20 overs, with each data point representing the score at a specific over. The zoom restriction feature allows users to focus on smaller segments of the overs, improving data readability and analysis.

Step 1
Configure a simple sample using the .NET MAUI Toolkit Cartesian Chart.

Step 2
ChartZoomPanBehavior enables zooming and panning operations on a Cartesian Chart. Initialize ChartZoomPanBehavior to manage zooming and panning within your chart.

Xaml

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

   <chart:ColumnSeries ItemsSource="{Binding Data}"
                     XBindingPath="Over"
                     YBindingPath="Score"/>
</chart:SfCartesianChart> 

C#

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

ColumnSeries series = new ColumnSeries
{
   ItemsSource = viewModel.Data,
   XBindingPath = "Over",
   YBindingPath = "Score",
};

chart.Series.Add(series); 

Step 3
Set the Maximum Zoom Level in the ChartZoomPanBehavior to control the zoom level. For example, with 20 data points (one per over in a cricket match), setting a maximum zoom level of 5 allows zooming in up to 4 segments (since 20 / 5 = 4), while preventing further zoom.

Xaml

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

   <chart:ColumnSeries ItemsSource="{Binding Data}"
                     XBindingPath="Over"
                     YBindingPath="Score"/>
</chart:SfCartesianChart> 

C#

SfCartesianChart chart = new SfCartesianChart();
...
ViewModel viewModel = new ViewModel();
chart.ZoomPanBehavior = new ChartZoomPanBehavior
{
   MaximumZoomLevel = 5,
   ZoomMode = ZoomMode.X
};

ColumnSeries series = new ColumnSeries
{
   ItemsSource = viewModel.Data,
   XBindingPath = "Over",
   YBindingPath = "Score", 
};

chart.Series.Add(series); 

Output

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to set the maximum zoom level in the .NET MAUI Cartesian Chart.
Refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Cartesian 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!