Xamarin Forms – How to create Bar Charts Graphs

ASH

5 years ago

In this post we will see how we can create Bar charts in Xamarin forms application. We will create bar graphs using UltimateXF library. You can download source code for UltimateXF from Github and add Nuget package in your Xamarin forms project using this link.

Now let’s start creating the application. Source code below is from the sample code provided on Github will little modifications.

DOWNLOAD SOURCE CODE

Add UltimateXF Nuget package in your Xamarin form application.

Command:

Install-Package UltimateXF -Version 2.3.2

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

Barchart.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"
xmlns:ultimateChart="clr-namespace:UltimateXF.Widget.Charts;assembly=UltimateXF"
Title="Barchart"
x:Class="XamarinGraphsPieCharts.BarChart">

<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:SupportBarChartExtended
x:Name="chart"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
DrawBorders="false"
Margin="5"
DoubleTapToZoomEnabled="false" />

</StackLayout>

</ContentPage>

The layout page contains a button to load our graphs.

And edit the code file as below:

Barchart.xaml.cs:

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

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

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

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

Random random = new Random();
for (int i = 0; i < 7; i++)
{
entries.Add(new EntryChart(i, random.Next(20)));
entries2.Add(new EntryChart(i, random.Next(20)));
labels.Add(products[i]);
}

var dataSet4 = new BarDataSet(entries, "Product Summary")
{
Colors = new List<Color>(){
Color.FromHex("#3696e0"), Color.FromHex("#9958bc"),
Color.FromHex("#35ad54"), Color.FromHex("#2d3e52"),
Color.FromHex("#e55137"), Color.FromHex("#ea9940"),
Color.Black
},
};

var data4 = new BarChartData(new List<IBarDataSet>() { dataSet4 });

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.XAxis.XAXISPosition = XAXISPosition.BOTTOM;
chart.XAxis.DrawGridLines = false;
chart.XAxis.AxisValueFormatter = new TextByIndexXAxisFormatter(labels);

}
catch (Exception ex)
{

}
}
}
}

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") + "$";
}
}

}

Now run your application.

You will have to change the start page to Barchart.xaml in your App.xaml.cs 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 BarChart());
}

}

}

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