How to explode the pie chart slice in WinUI Chart (SfCircularChart)?

The WinUI Chart provides a simple way to achieve specific visual effects by exploding segments in a Pie chart. You can explode this chart in any of the following ways.

Explode by interaction

The ExplodeOnTap property enables the segments to be exploded when they are touched or clicked by the user. The following code example demonstrates how to explode the segment by interaction in the Pie chart:

XAML

<chart:sfcircularchart>
      <chart:pieseries itemssource="{Binding Data}" xbindingpath="Name" ybindingpath="GDP" explodeontap="True" showdatalabels="True">
</chart:pieseries></chart:sfcircularchart>
                  

C#

      SfCircularChart circularChart = new SfCircularChart();
      PieSeries pieSeries = new PieSeries();
      pieSeries.ItemSource= this.Data;
      pieSeries.XBindingPath="Name";
      pieSeries.YBindingPath="GDP";
      pieSeries.ShowDataLabels= true;
      pieSeries.ExplodeOnTap= true;

      circularChart.Series.Add(pieSeries);
      this.Content = circularChart;  

Output for explode by interaction

Explode with segment index

You can control the explosion of a particular data point’s segment by adjusting the ExplodeIndex property of the chart series. The following code example demonstrates how to explode the segment by index in the Pie chart:

XAML

      <chart:pieseries explodeindex="4" explodeontap="True" showdatalabels="True">

C#

      PieSeries pieSeries = new PieSeries();
      ....
      pieSeries.ShowDataLabels= true;
      pieSeries.ExplodeIndex= 4;

      circularChart.Series.Add(pieSeries);
      this.Content = circularChart; 

Output for explode with segment index

Customize explode radius

The ExplodeRadius property allows you to define how far the segment will be exploded from the center of series. The following code example demonstrate how far the segment will explode from the center of the series:

XAML

       <chart:pieseries explodeindex="2" exploderadius="40">

C#

      PieSeries pieSeries = new PieSeries();
      ...
      pieSeries.ExplodeIndex= 2;
      pieSeries.ExplodeRadius= 40;

      circularChart.Series.Add(pieSeries);
      this.Content = circularChart;

Output for the explode with radius

Explode all segments

The ExplodeAll property allows you to simultaneously explode all segments within a series.

XAML

      <chart:pieseries explodeall="True">

C#

       PieSeries pieSeries = new PieSeries();
       ....
       pieSeries.ExplodeAll= true;

       circularChart.Series.Add(pieSeries);
       this.Content = circularChart;

Output for explode all segments

For a better understanding please refer the GitHub sample.

You can also achieve the same support in Doughnut chart also.

Conclusion

I hope you enjoyed learning about how to explode the pie chart slice in WinUI Chart (SfCircularChart).

You can refer to our WinUI Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WinUI Chart documentation to understand how to present and manipulate data.

For current customers, you can check out our WinUI 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 WinUI Chart and other WinUI 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!</chart:pieseries></chart:pieseries></chart:pieseries>