Doughnut Chart in WinUI Chart (SfCircularChart)

11 Oct 20217 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.

<chart:SfCircularChart>

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

</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();

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

chart.Series.Add(series);

Doughnut series type in WinUI chart

Multiple Doughnut

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

<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>
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);

Multiple doughnut series support in WinUI Chart

Doughnut Coefficient

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

<chart:SfCircularChart>

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

</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();

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

chart.Series.Add(series);

Doughnut coefficient support in WinUI Chart

Doughnut Size

The size of doughnut series can be customized by using the DoughnutSize property. The following code illustrates how to use this property in series.

<chart:SfCircularChart>

    <chart:SfCircularChart.Series>
        <chart:DoughnutSeries DoughnutSize="0.8" />
        <chart:DoughnutSeries DoughnutSize="0.8" />
    </chart:SfCircularChart.Series>

</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();

DoughnutSeries series1 = new DoughnutSeries();
. . .
series1.DoughnutSize = 0.8;
chart.Series.Add(series1);

DoughnutSeries series2 = new DoughnutSeries();
. . .
series2.DoughnutSize = 0.8;
chart.Series.Add(series2);

Doughnut size support in WinUI Chart

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.

<chart:SfCircularChart>

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

</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();

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

chart.Series.Add(series);

Semi doughnut support in WinUI Chart

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.