Xamarin forms How to create Piecharts using UltimateXF

In this post we will see how we can create Piecharts in Xamarin forms using UltimateXF library. You can download UltimateXF library from Github or add Nuget package in your Xamarin form application project. Below example is from Github project will some modifications.

DOWNLOAD SOURCE CODE.

First of all add Nuget package in your Project for UltimateXF:

Install-Package UltimateXF -Version 2.3.2

Create a new Content page in your project with name Piecharts.xaml and edit it as below:

Piecharts.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamarinGraphsPieCharts.PieCharts"
xmlns:ultimateChart="clr-namespace:UltimateXF.Widget.Charts;assembly=UltimateXF"
Title="Pie Chart">

<ContentPage.Content>
<ScrollView Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label Text="Line Chart in Xamarin Form"
HorizontalOptions="Start"
Margin="5"
VerticalOptions="Start" />

<Button Margin="5" Text="Load" HorizontalOptions="Start"
VerticalOptions="Start" x:Name="btnLoad" Clicked="BtnLoad_Clicked"/>

<ultimateChart:SupportPieChartExtended x:Name="pieChart" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />

<ultimateChart:SupportPieChartExtended x:Name="pieChart2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>

The design contains a button to load two different piecharts.

And edit its code file as below:

Piecharts.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using UltimateXF.Widget.Charts.Models.Formatters;
using UltimateXF.Widget.Charts.Models.PieChart;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamarinGraphsPieCharts
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class PieCharts : ContentPage
{
String[] products = new string[] {"Mobiles","Tablets","Earphones","Headphones","Speakers",
"USB Cables","Laptops","Backcase","Screencover" };

public PieCharts ()
{
InitializeComponent ();
}

private void BtnLoad_Clicked(object sender, EventArgs e)
{
LoadPieChart();
}

public void LoadPieChart()
{
try
{
var FontFamily = "";
switch (Device.RuntimePlatform)
{
case Device.iOS:
FontFamily = "Pacifico-Regular";
break;
case Device.Android:
FontFamily = "Fonts/Pacifico-Regular.ttf";
break;
default:
break;
}

var entries = new List<PieEntry>();

entries.Add(new PieEntry(10, products[0]));
entries.Add(new PieEntry(15, products[1]));
entries.Add(new PieEntry(15, products[2]));
entries.Add(new PieEntry(20, products[3]));
entries.Add(new PieEntry(35, products[4]));
entries.Add(new PieEntry(5, products[5]));

var dataSet4 = new PieDataSet(entries, "Products sold")
{
Colors = new List<Color>()
{
Color.FromHex("#3696e0"), Color.FromHex("#9958bc"),
Color.FromHex("#35ad54"), Color.FromHex("#2d3e52"),
Color.FromHex("#e55137"), Color.FromHex("#ea9940"),
Color.Black
},
ValueLineColor = Color.Blue,
SliceSpace = 5f,
ValueFormatter = new CustomPercentDataSetValueFormatter(),
ValueFontFamily = FontFamily
};
var data4 = new PieChartData(dataSet4)
{

};

var dataSet5 = new PieDataSet(entries, "Products sold")
{
};
var data5 = new PieChartData(dataSet5);

pieChart.DescriptionChart.Text = "Products sold in 2019";
pieChart2.DescriptionChart.Text = "Products sold in 2019";

pieChart.ChartData = data4;
pieChart2.ChartData = data5;

}
catch(Exception ex)
{

}
}
}

public class CustomPercentDataSetValueFormatter : IDataSetValueFormatter
{
public string GetFormattedValue(float value, int dataSetIndex)
{
return value + "%";
}
}
}

Change your application start page as below in App.xaml.cs:

App.xaml.cs:

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace XamarinGraphsPieCharts
{
public partial class App : Application
{
public App()
{
InitializeComponent();

MainPage = new NavigationPage(new PieCharts());
}

}

}

Initialize library in iOS project:
AppDelegate.cs:

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
global::Xamarin.Forms.Forms.Init();
UltimateXFSettup.Initialize();

LoadApplication(new App());

return base.FinishedLaunching(app, options);
}

Initialize library in Android project:
MainActivity.cs:

protected override void OnCreate(Bundle savedInstanceState)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;

base.OnCreate(savedInstanceState);
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
UltimateXFSettup.Initialize(this);
LoadApplication(new App());
}

DOWNLOAD SOURCE CODE.

Also see:

Xamarin forms create Barchart using UltimateXF.

Xamarin forms creating Linechart using UltimateXF.

Xamarin forms creating Pie Charts

Xamarin forms creating Bar Graphs using Oxyplot library.

Xamarin forms creating Splash Screen.