Explode segments in .NET MAUI SfCircularChart

9 Jul 20264 minutes to read

Exploding a segment

Exploding a segment pulls attention to a specific area of the circular chart. The following properties, available on both PieSeries and DoughnutSeries, are used to explode the segments in the circular chart.

• ExplodeIndex, of type int, explodes any specific segment. The default value is -1 (no segment exploded). The index is zero-based; out-of-range values are ignored.
• ExplodeRadius, of type double, defines the explode distance in pixels (px). The default value is 10. A positive value moves the segment outward from the center.
• ExplodeOnTouch, of type bool, enables a segment to be exploded on tap interaction. The default value is false. The explosion is animated when tapped.

NOTE

Prerequisite: Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the SfCircularChart control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.

XAML

<chart:SfCircularChart>
    <!-- code omitted for brevity -->
    <chart:DoughnutSeries x:Name="DoughnutSeries"
                          ItemsSource="{Binding Data}"
                          XBindingPath="XValue"
                          YBindingPath="YValue"
                          ExplodeIndex="2"
                          ExplodeRadius="12"
                          ExplodeOnTouch="True"/>
</chart:SfCircularChart>

C#

SfCircularChart chart = new SfCircularChart();
// code omitted for brevity
DoughnutSeries series = new DoughnutSeries()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue",
    ExplodeIndex = 2,
    ExplodeRadius = 12,
    ExplodeOnTouch = true
};

chart.Series.Add(series);
this.Content = chart;

Exploding all segments

By setting the ExplodeAll, of type bool, property of the PieSeries to true, all segments in a circular chart are visually exploded and highlighted. Combine this with ExplodeOnTouch to trigger the explosion on tap interaction. The default value is false. This property is shared by both PieSeries and DoughnutSeries.

XAML

<chart:SfCircularChart>
    <!-- code omitted for brevity -->
    <chart:DoughnutSeries x:Name="DoughnutSeries"
                          ItemsSource="{Binding Data}"
                          XBindingPath="XValue"
                          YBindingPath="YValue"
                          ExplodeAll="True"/>
</chart:SfCircularChart>

C#

SfCircularChart chart = new SfCircularChart();
// code omitted for brevity
DoughnutSeries series = new DoughnutSeries()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue",
    ExplodeAll = true
};

chart.Series.Add(series);
this.Content = chart;