Doughnut Chart in WinUI Chart (SfCircularChart)

9 Jul 20265 minutes to read

DoughnutSeries is similar to PieSeries. It is used to show the relationship between parts of data and the whole data. To render a DoughnutSeries in the 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

The circular chart provides support to add multiple doughnut series in a single chart.

<chart:SfCircularChart>
    <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>
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

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.

<chart:SfCircularChart>
    <chart:SfCircularChart.Series>
        <chart:DoughnutSeries 
            ItemsSource="{Binding Data}" 
            InnerRadius="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.InnerRadius = 0.7;

chart.Series.Add(series);

Inner radius support in WinUI Chart

Semi Doughnut

By using the StartAngle and EndAngle properties, you can draw the 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.