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.
Explode a slice in the WinUI Pie Chart to differentiate it from other slices.
Configure the semi-pie chart for compact visualization and reduction of rendering area.
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),
};
}
}
Explore the WinUI Pie Chart example from GitHub to learn how to render and configure charts.