The Xamarin.Forms pie chart is a circular graphic, which is ideal for displaying proportional values in different categories. Pie chart supports animation and interactive features such as tooltip and selection.
Explode a slice in the pie chart to differentiate it from other slices.
Configure the semi pie to visualize data in a different perspective and reduce the size of the rendering area.
Group smaller segments in a pie chart to a single segment called “others”.
Customize the look and feel of the pie using built-in APIs.
Arranges data labels smartly to avoid overlapping when the data point values fall in close range.
Easily get started with Xamarin Pie Chart using a few simple lines of C# code, as demonstrated below,
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ChartExample"
xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms"
x:Class="ChartExample.MainPage">
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<chart:SfChart>
<chart:SfChart.Series>
<chart:PieSeries ItemsSource="{Binding Data}" XBindingPath="Month" YBindingPath="Target"/>
</chart:SfChart.Series>
</chart:SfChart>
</ContentPage>
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 Xamarin.Forms Pie Chart example from GitHub to learn how to render and configure charts.