WinUI Pie Chart – Richly Animated Pie Charts

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 tooltip and selection.

WinUI Pie Chart Documentation

WinUI Pie Chart

Key Features

WinUI Pie Chart with Explode Slice

Explode Segments

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

WinUI Semi Pie Chart

Semi Pie

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

WinUI Pie Chart with Grouping

Grouping

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

WinUI Pie Chart with Data Labels

Data Labels

Data labels display information about the data points. Customize the labels’ foreground, border, and background. Template support to customize the default appearance with the desired view. Rotate a data label by its given angle.

Code Guideline

Easily get started with WinUI Pie Chart using a few simple lines of XAML and C# code, 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 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), 
        };
    }
}