Explode segments in .NET MAUI SfCircularChart

14 Jul 20232 minutes to read

Exploding a segment

Exploding a segment is used to pull attention to a specific area of the circular chart. The following properties are used to explode the segments in the circular chart.

• ExplodeIndex - Used to explode any specific segment.
• ExplodeRadius - Used to define the explode distance.
• ExplodeOnTouch - Enables the segment to be exploded on touch/tap interaction.

XAML

<chart:SfCircularChart>
    . . .
    <chart:DoughnutSeries x:Name="DoughnutSeries"
					  ItemsSource="{Binding Data}"
					  ExplodeIndex="2"
					  ExplodeRadius="10"
					  ExplodeOnTouch="True"
					  XBindingPath="Utilization"
					  YBindingPath="ResponseTime" />
</chart:SfCircularChart>

C#

SfCircularChart chart = new SfCircularChart();
. . .
DoughnutSeries series = new DoughnutSeries()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "Utilization",
    YBindingPath = "ResponseTime",
    ExplodeIndex = 2,
    ExplodeRadius = 10,
    ExplodeOnTouch = true
};

chart.Series.Add(series);

Exploding all the segments

By setting the ExplodeAll property of the PieSeries to true, all segments in a circular chart can be visually exploded and highlighted on touch or tap interaction.

XAML

<chart:SfCircularChart>
    . . .
    <chart:DoughnutSeries x:Name="DoughnutSeries"
					  ItemsSource="{Binding Data}"
					  XBindingPath="XValue"
					  YBindingPath="YValue"
                      ExplodeAll="True" />
</chart:SfCircularChart>

C#

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

chart.Series.Add(series);