How to create a Pie Chart in .NET MAUI CircularChart?
A .NET MAUI Pie Chart provides a visual representation of percentages at a specific point in time and can effectively show the distribution of percentages of a whole. This guide explains how to create visually appealing .NET MAUI Pie Charts using Syncfusion® components.
Register the handler
The Syncfusion.Maui.Core NuGet is a dependent package for all Syncfusion® controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion® core. For more details, refer to the Syncfusion® documentation.
Initialize a Chart
Import the SfCircularChart namespace as follows.
[XAML]
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
[C#]
using Syncfusion.Maui.Charts;
Initialize an empty chart and set it as content.
[XAML]
<chart:SfCircularChart> . . . </chart:SfCircularChart>
[C#]
SfCircularChart chart = new SfCircularChart(); . . . this.Content = chart;
Initialize ViewModel
Now, define a simple data model that represents a data point for the .NET MAUI Pie chart.
public class Model
{
public string Country{ get; set; }
public double Counts { get; set; }
public Model(string name , double count)
{
Country= name;
Counts = count;
}
}
Create a ViewModel class and initialize a list of objects as shown in the following code sample.
public class ViewModel
{
public ObservableCollection<Model> Data { get; set; }
public ViewModel()
{
Data = new ObservableCollection<Model>()
{
new Model("Algeria", 28),
new Model("Australia", 14),
new Model("Bolivia", 31),
new Model("Cambodia", 77),
new Model("Canada", 19),
};
}
}
Set the ViewModel instance as the BindingContext of the chart; this is done to bind properties of ViewModel to the SfCircularChart.
Add the namespace of the ViewModel class to your XAML page, if you prefer to set the BindingContext in XAML.
[XAML]
xmlns:viewModel ="clr-namespace:MauiApp" . . . <chart:SfCircularChart> <chart:SfCircularChart.BindingContext> <viewModel:ViewModel/> </chart:SfCircularChart.BindingContext> </chart:SfCircularChart>
[C#]
SfCircularChart chart = new SfCircularChart(); chart.BindingContext = new ViewModel();
How to populate data in .NET MAUI Pie Charts
As we are going to visualize the comparison of the annual population of various countries in the data model, add a PieSeries to the SfCircularChart.Series property, and then bind the Data property of the above ViewModel to the PieSeries ItemsSource property as shown in the following code sample.
Need to set XBindingPath and YBindingPath properties so that the series will fetch values from the respective properties in the data model to plot the series.
[XAML]
<chart:SfCircularChart>
…
<chart:SfCircularChart.BindingContext>
<viewModel:ViewModel/>
</chart:SfCircularChart.BindingContext>
<chart:SfCircularChart.Series>
<chart:PieSeries ItemsSource="{Binding Data}"
XBindingPath="Country"
YBindingPath="Counts"
ShowDataLabels="True">
</chart:PieSeries>
</chart:SfCircularChart.Series>
…
</chart:SfCircularChart>
[C#]
SfCircularChart chart = new SfCircularChart ();
chart.BindingContext = new ViewModel();
. . .
var binding = new Binding() { Path = "Data" };
var series = new PieSeries()
{
XBindingPath = " Country",
YBindingPath = "Counts",
ShowDataLabels = true
};
series.SetBinding(ChartSeries.ItemsSourceProperty, binding);
chart.Series.Add(series);
Output
Download the complete sample on GitHub.
Conclusion
I hope you enjoyed learning how to create a Pie Chart in .NET MAUI Circular Chart.
You can refer to our .NET MAUI Circular Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Chart Documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
