Xamarin Android - MicroCharts

Available charts Microcharts.Forms Plugin

Barchart
PointChart
LineChart
DonutChart
RadialGaugeChart
RadarChart

Step 1

You can create Xamarin.Forms apps by going to File >> New >> Visual C# >> Android >> Blank App. Just give the application a name and press OK.

Step 2

Now, add the following NuGet Package for your projects.

nuGet package : search "Microcharts" and not "Microcharts.Forms"

Step 3 Main.axml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<microcharts.droid.ChartView
android:id="@+id/chartView"
android:layout_width="match_parent"
android:layout_height="160dp" />
<microcharts.droid.ChartView
android:id="@+id/Chart2"
android:layout_width="match_parent"
android:layout_height="160dp"/>
<microcharts.droid.ChartView android:id="@+id/Chart3"
android:layout_width="match_parent"
android:layout_height="160dp"/>
<microcharts.droid.ChartView android:id="@+id/Chart4"
android:layout_width="match_parent"
android:layout_height="160dp"/>
<microcharts.droid.ChartView android:id="@+id/Chart5"
android:layout_width="match_parent"
android:layout_height="160dp"/>
<microcharts.droid.ChartView android:id="@+id/Chart6"
android:layout_width="match_parent"
android:layout_height="160dp"/>
</LinearLayout>
</ScrollView>

Step 4

In this step, add data entries. For that, open Solution Explorer >> click open MainPage.xaml.cs.

using Android.App;
using Android.Widget;
using Android.OS;
using System.Collections.Generic;
using Microcharts;
using SkiaSharp;
using Entry = Microcharts.Entry;
using Microcharts.Droid;
namespace App1
{
[Activity(Label = "App1", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : Activity
{
List<Entry> entries = new List<Entry>
{
new Entry(200)
{
Color=SKColor.Parse("#FF1943"),
Label ="January",
ValueLabel = "200"
},
new Entry(400)
{
Color = SKColor.Parse("00BFFF"),
Label = "March",
ValueLabel = "400"
},
new Entry(-100)
{
Color = SKColor.Parse("#00CED1"),
Label = "Octobar",
ValueLabel = "-100"
},
};
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView (Resource.Layout.Main);
var chartView = FindViewById<ChartView>(Resource.Id.chartView);
var chartview2 = FindViewById<ChartView>(Resource.Id.Chart2);
var chartview3 = FindViewById<ChartView>(Resource.Id.Chart3);
var chartview4 = FindViewById<ChartView>(Resource.Id.Chart4);
var chartview5 = FindViewById<ChartView>(Resource.Id.Chart5);
var chartview6 = FindViewById<ChartView>(Resource.Id.Chart6);
var chart = new RadialGaugeChart() { Entries = entries };
var chart2 = new LineChart() { Entries = entries };
var chart3 = new DonutChart() { Entries = entries };
var chart4 = new PointChart() { Entries = entries };
var chart5 = new RadarChart() { Entries = entries };
var chart6 = new BarChart() { Entries = entries };
chartView.Chart = chart;
chartview2.Chart = chart2;
chartview4.Chart = chart3;
chartview3.Chart = chart4;
chartview5.Chart = chart5;
chartview6.Chart = chart6;
// https://stackoverflow.com/questions/47407895/exception-while-loading-assemblies-system-io-filenotfoundexception-could-not-l
}
}
}

Step 5

If you find any error like Tuple, please follow the below link.

https://stackoverflow.com/questions/47407895/exception-while-loading-assemblies-system-io-filenotfoundexception-could-not-l

If you need multiple colors, then use the below code.

var entries = new[]
{
new Entry(200)
{
Label = "January",
ValueLabel = "200",
Color = SKColor.Parse(HexConverter())
},
new Entry(400)
{
Label = "February",
ValueLabel = "400",
Color = SKColor.Parse(HexConverter())
},
new Entry(-100)
{
Label = "March",
ValueLabel = "-100",
Color = SKColor.Parse(HexConverter())
}
};
//var chart = new BarChart() { Entries = entries };
var chartView = view.FindViewById<ChartView>(Resource.Id.chartView1);
var chartview2 = view.FindViewById<ChartView>(Resource.Id.chartView2);
var chartview3 = view.FindViewById<ChartView>(Resource.Id.chartView3);
var chartview4 = view.FindViewById<ChartView>(Resource.Id.chartView4);
var chartview5 = view.FindViewById<ChartView>(Resource.Id.chartView5);
var chartview6 = view.FindViewById<ChartView>(Resource.Id.chartView6);
var chart = new RadialGaugeChart() { Entries = entries };
var chart2 = new LineChart() { Entries = entries };
var chart3 = new DonutChart() { Entries = entries };
var chart4 = new PointChart() { Entries = entries };
var chart5 = new RadarChart() { Entries = entries };
var chart6 = new BarChart() { Entries = entries };
chartView.Chart = chart;
chartview2.Chart = chart2;
chartview4.Chart = chart3;
chartview3.Chart = chart4;
chartview5.Chart = chart5;
chartview6.Chart = chart6;
private static string HexConverter()
{
Android.Graphics.Color c = new Android.Graphics.Color((int)(Java.Lang.Math.Random() * 0x1000000));
return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");
}

Finally, we have successfully created Xamarin Android Microcharts application.