Xamarin Android - MicroCharts

Microcharts, which displays charts in mobile apps has always been a great way to offer users a clear overview of numerical data.

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.