Xamarin Forms How to create LineCharts using UltimateXF

In this post we will create LineCharts in Xamarin forms application using UltimateXF library. You can download source code for UltimateXF library from Github and add Nuget package directly into your xamarin form application. This example is from github source code with little modification here and there. Let’s start.

DOWNLOAD SOURCE CODE

First of all add UltimateXF Nuget package in your Xamarin form application.

Command:

Install-Package UltimateXF -Version 2.3.2

In your Xamarin forms application add a new page with name Linechart.xaml and edit it as below:

Linechart.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.LineChart"
xmlns:ultimateChart="clr-namespace:UltimateXF.Widget.Charts;assembly=UltimateXF"
Title="Line Chart">

<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<!-- Place new controls here -->
<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:SupportLineChartExtended
x:Name="chart"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
DrawBorders="false"
Margin="5"
DoubleTapToZoomEnabled="false" />

</StackLayout>

</ContentPage>

Above form contains Linechart and a button to load our Linechart.

Edit the code as below:

LineChart.xaml.cs:

using System;
using System.Collections.Generic;
using UltimateXF.Widget.Charts.Models;
using UltimateXF.Widget.Charts.Models.Formatters;
using UltimateXF.Widget.Charts.Models.LineChart;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

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

public LineChart()
{
InitializeComponent();
}

public void LoadChart()
{
try
{
var entries = new List<EntryChart>();
var entries2 = new List<EntryChart>();
var labels = new List<string>();

var random = new Random();
for (int i = 0; i < 7; i++)
{
entries.Add(new EntryChart(i, random.Next(1000, 50000)));
entries2.Add(new EntryChart(i, random.Next(1000, 50000)));
labels.Add(products[i]);
}
var FontFamily = "";
switch (Device.RuntimePlatform)
{
case Device.iOS:
FontFamily = "Pacifico-Regular";
break;
case Device.Android:
FontFamily = "Fonts/Pacifico-Regular.ttf";
break;
default:
break;
}
var dataSet4 = new LineDataSetXF(entries, "Product Summary 1")
{
CircleRadius = 10,
CircleHoleRadius = 4f,
CircleColors = new List<Color>(){
Color.Accent, Color.Red, Color.Bisque, Color.Gray, Color.Green, Color.Chocolate, Color.Black
},
CircleHoleColor = Color.Green,

ValueColors = new List<Color>(){
Color.FromHex("#3696e0"), Color.FromHex("#9958bc"),
Color.FromHex("#35ad54"), Color.FromHex("#2d3e52"),
Color.FromHex("#e55137"), Color.FromHex("#ea9940"),
Color.Black
},
Mode = LineDataSetMode.CUBIC_BEZIER,
ValueFormatter = new CustomDataSetValueFormatter(),
ValueFontFamily = FontFamily
};

var dataSet5 = new LineDataSetXF(entries2, "Product Summary 2")
{
Colors = new List<Color>{
Color.Green
},
CircleHoleColor = Color.Blue,
CircleColors = new List<Color>{
Color.Blue
},
CircleRadius = 3,
DrawValues = false,

};

var data4 = new LineChartData(new List<ILineDataSetXF>() { dataSet4, dataSet5 });

chart.ChartData = data4;
chart.DescriptionChart.Text = "Product chart description";
chart.AxisLeft.DrawGridLines = false;
chart.AxisLeft.DrawAxisLine = true;
chart.AxisLeft.Enabled = true;

chart.AxisRight.DrawAxisLine = false;
chart.AxisRight.DrawGridLines = false;
chart.AxisRight.Enabled = false;

chart.AxisRight.FontFamily = FontFamily;
chart.AxisLeft.FontFamily = FontFamily;
chart.XAxis.FontFamily = FontFamily;

chart.XAxis.XAXISPosition = XAXISPosition.BOTTOM;
chart.XAxis.DrawGridLines = false;
chart.XAxis.AxisValueFormatter = new TextByIndexXAxisFormatter(labels);

}
catch (Exception ex)
{

}
}

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

}

Create a class file with name CustomDataSetValueFormatter.cs and edit it as below:

CustomDataSetValueFormatter.cs:

using UltimateXF.Widget.Charts.Models.Formatters;

namespace XamarinGraphsPieCharts
{
public class CustomDataSetValueFormatter : IDataSetValueFormatter
{
public string GetFormattedValue(float value, int dataSetIndex)
{
return value.ToString("N2") + "$";
}
}

}

Change your Xamarin forms start page to Linechart.xaml form in App.xaml file:

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 LineChart());
}

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

Xamarin Forms Linechart graph using UltimateXF library

DOWNLOAD SOURCE CODE

Also see:

Xamarin forms creating Piecharts using UltimateXF

Xamarin forms create Barcharts graphs using UltimateXF

Xamarin forms creating Pie Charts

Xamarin forms creating Bar Graphs using Oxyplot library.

Xamarin forms creating Splash Screen.