We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


Overview

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

WPF Doughnut Chart documentation

WPF Doughnut Chart


Key features

WPF Doughnut Chart with Custom View at Center

Doughnut hole customization

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

WPF Doughnut Chart Explode with Single Segment

Explode on touch

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

WPF Doughnut Chart with Grouping

Grouping

Group smaller segments in the WPF doughnut chart that are below the previously set value into a single segment called “others”.

WPF Doughnut Chart with different Styles

UI styling

Customize the color and border of the WPF Doughnut Chart using built-in APIs to make it visually unique.

WPF Semi Doughnut Chart

Start and end angles

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

WPF 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 a doughnut.

WPF Doughnut Chart with Smart Labels

Smart labels

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


Code example

Easily get started with the WPF Doughnut Chart using a few simple lines of C# code example as demonstrated below,

<Window x:Class="ChartExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ChartExample"
        xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
        mc:Ignorable="d"
        Title="WPF Doughnut Chart" Height="450" Width="700">
    
    <!--Setting DataContext-->
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    
    <StackPanel>
        <chart:SfChart Height="300" Width="500">
            <!--Adding Doughnut Series to the WPF Chart-->
            <chart:DoughnutSeries 
                    ItemsSource="{Binding Data}" 
                    XBindingPath="Month"
                    YBindingPath="Target">
            </chart:DoughnutSeries>
        </chart:SfChart>
    </StackPanel>
</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), 
        };
    }
}

Learning resources

Navigate to GitHub code used to configure the WPF Doughnut Chart

GitHub Code

The WPF Doughnut Chart configuration code is available in GitHub.

Navigate to the options available in the user guide to customize the WPF Doughnut Chart

WPF Donut Chart User Guide

Learn more about the available options to customize WPF Doughnut Charts.

Navigate to the API references documentation of the WPF Doughnut Chart

WPF Donut Chart API Reference

Explore the WPF Doughnut Chart APIs.


100+ WPF CONTROLS

Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon