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
Syncfusion Feedback


Overview

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

.NET MAUI Doughnut Chart documentation

.NET MAUI doughnut chart.


Key features

.NET MAUI doughnut chart with custom view at center.

Doughnut hole customization

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

.NET MAUI doughnut chart explode single segment.

Explode segments

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

.NET MAUI doughnut chart with different styles.

UI styling

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

.NET MAUI semi-doughnut chart.

Start and end angles

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

.NET MAUI 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.

.NET MAUI 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 example

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="ChartExample.MainPage"
        xmlns:local="using:ChartExample"
        xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
    
    <Grid>
        <chart:SfCircularChart  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <!--Setting BindingContext-->
            <chart:SfCircularChart.BindingContext>
                <local:ViewModel/>
            </chart:SfCircularChart.BindingContext>

            <!--Adding Doughnut Series to the .NET MAUI Circular Chart.-->
            <chart:DoughnutSeries 
                        ItemsSource="{Binding Data}" 
                        XBindingPath="Month"
                        YBindingPath="Target">
            </chart:DoughnutSeries>
        </chart:SfCircularChart>
    </Grid>
</ContentPage>
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 .NET MAUI doughnut chart.

GitHub Code

The .NET MAUI doughnut chart configuration code is available in GitHub.

Navigate to the options available in the user guide to customize the .NET MAUI doughnut chart.

.NET MAUI Doughnut Chart User Guide

Learn more about the available options to customize .NET MAUI doughnut charts.

Navigate to the API references documentation of the MAUI doughnut chart.

.NET MAUI Doughnut Chart API References

Explore the .NET MAUI doughnut chart APIs.


Scroll up icon