Explode segments in WinUI Chart (SfCircularChart)

17 Dec 20252 minutes to read

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.

• ExplodeAll - Used to explode all the segments of these series.
• ExplodeIndex - Used to explode any specific segment.
• ExplodeRadius - Used to define the explode distance.
• ExplodeOnTap - Used to explode the segment when segment is clicked.

Explode Index

XAML

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

C#

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

chart.Series.Add(series);

NOTE

By default ExplodeRadius value is zero. So you need to define ExplodeRadius value, when you set ExplodeIndex or ExplodeAll.

Explode All

XAML

<chart:SfCircularChart>
. . .
    <chart:PieSeries ExplodeAll="True"
		     ExplodeRadius="15"
		     XBindingPath="Category"
		     ItemsSource="{Binding Data}"
	             YBindingPath="Value">
</chart:SfCircularChart>

C#

SfCircularChart chart = new SfCircularChart();
. . .
PieSeries series = new PieSeries()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "Category",
    YBindingPath = "Value",
    ExplodeAll = true,
    ExplodeRadius = 15
};

chart.Series.Add(series);