How to explode the data points in a .NET MAUI Chart (SfCircularChart)?
A doughnut chart in .NET MAUI Circular Chart with an explosion can be considered an exploded doughnut chart. This can be useful for highlighting a specific data point in a chart. You can explode this chart in any of the following ways.
Explode by interaction
The ExplodeOnTouch property, when set to true, allows users to explode a data point by simply tapping or clicking on it.
[XAML]
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
<chart:SfCircularChart>
<chart:DoughnutSeries ItemsSource="{Binding Data}"
XBindingPath=" Product "
YBindingPath="Value"
ExplodeOnTouch="True"/>
...
</chart:SfCircularChart>
[C#]
using Syncfusion.Maui.Charts; SfCircularChart chart = new SfCircularChart(); ... DoughnutSeries series = new DoughnutSeries(); series.ItemsSource = new ChartViewModel().Data; series.XBindingPath = "Name"; series.YBindingPath = "Value"; series. ExplodeOnTouch=true, chart.Series.Add(series); this.Content= chart;
Explode by code
The ExplodeIndex property allows you to specify a specific data point to be exploded by its index in the series.
[XAML]
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts" <chart:SfCircularChart> <chart:DoughnutSeries ExplodeIndex="2"/> ... </chart:SfCircularChart>
[C#]
using Syncfusion.Maui.Charts; SfCircularChart chart = new SfCircularChart(); ... DoughnutSeries series = new DoughnutSeries(); series.ExplodeIndex = 2; chart.Series.Add(series); this.Content= chart;
Customize explode radius
The ExplodeRadius property is used to specify the distance between the actual position and the exploded position of the segment.
[XAML]
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts" <chart:SfCircularChart> <chart:DoughnutSeries ExplodeIndex="2" ExplodeRadius="35"/> ... </chart:SfCircularChart>
[C#]
using Syncfusion.Maui.Charts; SfCircularChart chart = new SfCircularChart(); ... DoughnutSeries series = new DoughnutSeries(); series.ExplodeIndex = 2; series.ExplodeRadius = 35; chart.Series.Add(series); this.Content= chart;
See also
- How to create a circular chart in .NET MAUI?
- Explode segments in .NET MAUI Chart (SfCircularChart)
- Doughnut Chart in .NET MAUI Chart (SfCircularChart)
Conclusion
I hope you enjoyed learning about how to explode the .NET MAUI Doughnut Chart Data Points? (SfCircularChart).
You can refer to our .NET MAUI Circular Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI Circular Chart documentation to understand how to present and manipulate data.
For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI Circular Chart and other .NET MAUI components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
