Doughnut Chart in WinUI Chart (SfCircularChart)

1 Jul 20226 minutes to read

DoughnutSeries is similar to PieSeries. It is used to show the relationship between parts of data and whole data. To render a DoughnutSeries in circular chart, create an instance of the DoughnutSeries and add it to the Series collection property of SfCircularChart.

XAML

<chart:SfCircularChart>

    <chart:SfCircularChart.Series>
        <chart:DoughnutSeries ItemsSource="{Binding Data}" 
                              XBindingPath="Product" 
                              YBindingPath="SalesRate" />
    </chart:SfCircularChart.Series>

</chart:SfCircularChart>

C#

SfCircularChart chart = new SfCircularChart();

DoughnutSeries series = new DoughnutSeries();
series.XBindingPath = "Product";
series.YBindingPath = "SalesRate";

chart.Series.Add(series);

Multiple Doughnut

Circular chart provides support add the multiple doughnut series in a single chart.

XAML

<chart:SfCircularChart>

    <chart:SfCircularChart.Series>
         <chart:SfCircularChart.Series>
                <chart:DoughnutSeries ItemsSource="{Binding Data}" 
                         XBindingPath="Product" 
                         YBindingPath="SalesRate1">
                </chart:DoughnutSeries>
                <chart:DoughnutSeries ItemsSource="{Binding Data}" 
                         XBindingPath="Product" 
                         YBindingPath="SalesRate2">
                </chart:DoughnutSeries>
                <chart:DoughnutSeries ItemsSource="{Binding Data}" 
                         XBindingPath="Product" 
                         YBindingPath="SalesRate3">
                </chart:DoughnutSeries>
            </chart:SfCircularChart.Series>
    </chart:SfCircularChart.Series>

</chart:SfCircularChart>

C#

SfCircularChart chart = new SfCircularChart();

DoughnutSeries series1 = new DoughnutSeries();
series1.XBindingPath = "Product";
series1.YBindingPath = "SalesRate1";

DoughnutSeries series2 = new DoughnutSeries();
series2.XBindingPath = "Product";
series2.YBindingPath = "SalesRate2";

DoughnutSeries series3 = new DoughnutSeries();
series3.XBindingPath = "Product";
series3.YBindingPath = "SalesRate3";

chart.Series.Add(series1);
chart.Series.Add(series2);
chart.Series.Add(series3);

Inner Radius

The InnerRadius property of the doughnut series is used to define the inner circle. It also has the Radius property which is used to define the size for this series, similar to the Radius in the PieSeries.

XAML

<chart:SfCircularChart>

    <chart:SfCircularChart.Series>
        <chart:DoughnutSeries ItemsSource="{Binding Data}" InnerRadius="0.7"
                          XBindingPath="Product" 
                          YBindingPath="SalesRate" />
    </chart:SfCircularChart.Series>

</chart:SfCircularChart>

C#

SfCircularChart chart = new SfCircularChart();

DoughnutSeries series = new DoughnutSeries();
series.XBindingPath = "Product";
series.YBindingPath = "SalesRate";
series.InnerRadius = 0.7;

chart.Series.Add(series);

Semi Doughnut

By using the StartAngle and EndAngle properties, you can draw doughnut series in different shapes such as semi-doughnut or quarter doughnut series.

XAML

<chart:SfCircularChart>

    <chart:SfCircularChart.Series>
        <chart:DoughnutSeries StartAngle="180" EndAngle="360"
                          ItemsSource="{Binding Data}"
                          XBindingPath="Product" 
                          YBindingPath="SalesRate" />
    </chart:SfCircularChart.Series>

</chart:SfCircularChart>

C#

SfCircularChart chart = new SfCircularChart();

DoughnutSeries series = new DoughnutSeries();
series.XBindingPath = "Product";
series.YBindingPath = "SalesRate";
series.StartAngle = 180;
series.EndAngle = 360;

chart.Series.Add(series);

NOTE

You can refer to our WinUI Doughnut Chart feature tour page for its groundbreaking feature representations. You can also explore our WinUI Doughnut Chart example that shows how to easily configure with built-in support for creating stunning visual effects.