Syncfusion Feedback


Overview

The WinUI Pie Chart is a circular graphic, which is ideal for displaying proportional values in different categories. Pie charts support animation and interactive features such as tooltips and selection.

Pie Chart documentation

Pie Chart


Key features

Pie Chart with an exploded slice

Explode segments

Explode a slice in the WinUI Pie Chart to differentiate it from other slices.

Semi-pie chart

Semi pie

Configure the semi-pie chart for compact visualization and reduction of rendering area.

Pie Chart with grouping

Grouping

Group smaller segments in the WinUI Pie Chart to a single segment called “others” using GroupTo and GroupMode properties.


Code guidelines

Get started with WinUI Pie Chart using a few simple lines of XAML and C# code, as demonstrated below:

<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 Pie Chart" Height="450" Width="700">
    
    <Grid>
        <chart:SfCircularChart Height="300" Width="500">
            <!--Setting DataContext-->
            <chart:SfCircularChart.DataContext>
                <local:ViewModel/>
            </chart:SfCircularChart.DataContext>

            <!--Adding Pie Series to the WinUI Chart-->
            <chart:SfCircularChart.Series>
                <chart:PieSeries ItemsSource="{Binding Data}" XBindingPath="Month" YBindingPath="Target">              
                </chart:PieSeries>
            </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), 
        };
    }
}

Learning Resources

Navigate to GitHub code used to configure the WinUI Pie Chart

GitHub Code

Explore the WinUI Pie Chart example from GitHub to learn how to render and configure charts.

Navigate to the options available in the user guide to customize the WinUI Pie Chart

WinUI Pie Chart user guide

Learn more about the available options to customize WinUI Pie Charts.

Navigate to the API references documentation of the WinUI Pie Chart

WinUI Pie Chart API reference

Explore the WinUI Pie Chart APIs.


Syncfusion WinUI DataViz & UI Controls

Scroll up icon