How to explode the data points in a .NET MAUI Chart (SfCircularChart)?
A doughnut chart in .NET MAUI Circular Chart can feature an exploded design to highlight specific data points. This functionality is useful for emphasizing particular segments within a chart. You can achieve this explosion in 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 particular 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 the explode radius
The ExplodeRadius property specifies 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 how to explode data points in a .NET MAUI Doughnut Chart.
You can refer to our .NET MAUI Circular Chart feature tour page to learn 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, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Circular Chart and other .NET MAUI components.
Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
