https://github.com/syncfusionexamples/how-to-showcase-the-zoom-events-in-an-sfcartesianchart
How to showcase the zoom events in an SfCartesianChart
https://github.com/syncfusionexamples/how-to-showcase-the-zoom-events-in-an-sfcartesianchart
chart-zooming charting-library charts data-visualization interactive-charts maui-charts scroll-events selection-zooming zoom-end zoom-events zoom-pan-behavior zoom-pan-events zoom-start
Last synced: about 2 months ago
JSON representation
How to showcase the zoom events in an SfCartesianChart
- Host: GitHub
- URL: https://github.com/syncfusionexamples/how-to-showcase-the-zoom-events-in-an-sfcartesianchart
- Owner: SyncfusionExamples
- Created: 2024-06-13T10:05:02.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2024-07-19T09:56:39.000Z (10 months ago)
- Last Synced: 2025-02-08T20:47:53.330Z (3 months ago)
- Topics: chart-zooming, charting-library, charts, data-visualization, interactive-charts, maui-charts, scroll-events, selection-zooming, zoom-end, zoom-events, zoom-pan-behavior, zoom-pan-events, zoom-start
- Language: C#
- Homepage:
- Size: 162 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# How to retrieve axis range min/max values on Zoom in .NET MAUI SfCartesianChart
[.NET MAUI SfCartesianChart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts) provides [zoom and pan events](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_VisibleMinimum) and [VisibleMaximum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_VisibleMaximum) values during these interactions.
##### Zoom and Pan Events:
* **[ZoomStart:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_ZoomStart)** Triggered when the user initiates a zoom action. Can be canceled to interrupt the action.
* **[ZoomDelta:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_ZoomDelta)** Activated during the zooming process and can be canceled.
* **[ZoomEnd:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_ZoomEnd)** Triggered when the zooming action finishes.
* **[SelectionZoomStart:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_SelectionZoomStart)** Occurs when the user begins box selection zooming.
* **[SelectionZoomDelta:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_SelectionZoomDelta)** Activated during the process of selecting a region for zooming and can be canceled.
* **[SelectionZoomEnd:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_SelectionZoomEnd)** Triggered after the selection zooming ends.
* **[Scroll:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_Scroll)** Triggered during panning and can be canceled.
* **[Reset:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_ResetZoom)** Triggered after the chart is reset by double-tapping.
### Initialize SfCartesianChart:
Begin by setting up the **SfCartesianChart** according to the [guidelines in the documentation](https://help.syncfusion.com/maui/cartesian-charts/getting-started).
### Initialize ZoomPanBehaviour:
To enable the zooming and panning in the chart, create an instance of [ChartZoomPanBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartZoomPanBehavior.html) and set it to the [ZoomPanBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_ZoomPanBehavior) property of [SfCartesianChart.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html)
XAML
```html
```
C#
```csharp
SfCartesianChart chart = new SfCartesianChart();
DateTimeAxis primaryAxis = new DateTimeAxis();
primaryAxis.Title = new ChartAxisTitle
{
Text = "Year",
};
primaryAxis.LabelStyle = new ChartAxisLabelStyle
{
LabelFormat = "MMM-dd"
};
chart.XAxes.Add(primaryAxis);
NumericalAxis secondaryAxis = new NumericalAxis();
secondaryAxis.Title = new ChartAxisTitle
{
Text = "Stock price [in dollar]",
};
chart.YAxes.Add(secondaryAxis);
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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_ZoomEnd) and [Scroll](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_VisibleMinimum) and [VisibleMaximum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_VisibleMaximum) of the axis. Convert these double values to DateTime objects to enable direct manipulation and visualization of date and time values.
XAML
```html
```
```csharp
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# :
```csharp
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;
```
