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 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:

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), 
        };
    }
}