WinUI Doughnut Chart - Visualize the Proportions Easy

Overview

The WinUI Doughnut Chart (a.k.a WinUI Donut Chart) is a circular graphic ideal for displaying proportional values in different categories. The doughnut chart in WinUI supports animation and interactive features such as tooltip and selection.

WinUI Doughnut Chart Documentation

WinUI Doughnut Chart

Key Features

WinUI Doughnut Chart with Custom View at Center

Doughnut Hole Customization

Any view can be added to the center of the doughnut chart.

WinUI Doughnut Chart Explode with Single Segment

Explode Segments

Explode a single segment of the WinUI doughnut chart to differentiate it from others.

WinUI Doughnut Chart with Grouping

Grouping

Group the smaller segments in the WinUI doughnut chart into a single segment called “others”.

WinUI Doughnut Chart with different Styles

UI Styling

Customize the look and feel of the doughnut using built-in APIs.

WinUI Semi Doughnut Chart

Start and End Angles

Customize the start angle and end angle of the chart to create a semi-doughnut chart.

WinUI Doughnut Chart with Inner Radius

Custom Inner Radius

Making the inner radius 0 will change the doughnut chart to a pie chart. You can customize both the radius and inner radius of the doughnut.

WinUI Doughnut Chart with Smart Labels

Smart Labels

Arrange data labels smartly to avoid overlapping when the data point values are in a close range.

Code Guideline

Easily get started with the WinUI Doughnut Charts using a few simple lines of XAML and C# code example as demonstrated below

xaml
c#
<Window x:Class="ChartExample.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:ChartExample"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        xmlns:chart="using:Syncfusion.UI.Xaml.Charts"
        mc:Ignorable="d"
        Title="WinUI Doughnut Chart" Height="450" Width="700">
    
    <Grid>
        <chart:SfCircularChart Height="300" Width="500">
            <!--Setting DataContext-->
            <chart:SfCircularChart.DataContext>
                <local:ViewModel/>
            </chart:SfCircularChart.DataContext>

            <!--Adding Doughnut Series to the WinUI Chart-->
            <chart:SfCircularChart.Series>
                <chart:DoughnutSeries 
                        ItemsSource="{Binding Data}" 
                        XBindingPath="Month"
                        YBindingPath="Target">
                </chart:DoughnutSeries>
            </chart:SfCircularChart.Series>
        </chart:SfCircularChart>
    </Grid>
</Window>
public class Model
{
    public string Month { get; set; }

    public double Target { get; set; }

    public Model(string xValue, double yValue)
    {
        Month = xValue;
        Target = yValue;
    }
}

public class ViewModel
{
    public ObservableCollection<Model> Data { get; set; }

    public ViewModel()
    {
        Data = new ObservableCollection<Model>()
        {
            new Model("Jan", 50),
            new Model("Feb", 70),
            new Model("Mar", 65),
            new Model("Apr", 57),
            new Model("May", 48), 
        };
    }
}