Post
Ask Question

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
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent">  
  5.   <LinearLayout  
  6.       android:orientation="vertical"  
  7.       android:layout_width="match_parent"  
  8.       android:layout_height="wrap_content">  
  9.     <microcharts.droid.ChartView  
  10.         android:id="@+id/chartView"  
  11.         android:layout_width="match_parent"  
  12.         android:layout_height="160dp" />  
  13.     <microcharts.droid.ChartView   
  14.         android:id="@+id/Chart2"  
  15.                                   android:layout_width="match_parent"  
  16.                                   android:layout_height="160dp"/>  
  17.     <microcharts.droid.ChartView android:id="@+id/Chart3"  
  18.                                   android:layout_width="match_parent"  
  19.                                   android:layout_height="160dp"/>  
  20.     <microcharts.droid.ChartView android:id="@+id/Chart4"  
  21.                                   android:layout_width="match_parent"  
  22.                                   android:layout_height="160dp"/>  
  23.     <microcharts.droid.ChartView android:id="@+id/Chart5"  
  24.                                   android:layout_width="match_parent"  
  25.                                   android:layout_height="160dp"/>  
  26.     <microcharts.droid.ChartView android:id="@+id/Chart6"  
  27.                                   android:layout_width="match_parent"  
  28.                                   android:layout_height="160dp"/>  
  29.   </LinearLayout>  
  30. </ScrollView>  
Step 4

In this step, add data entries. For that, open Solution Explorer >> click open MainPage.xaml.cs.
  1. using Android.App;  
  2. using Android.Widget;  
  3. using Android.OS;  
  4. using System.Collections.Generic;  
  5. using Microcharts;  
  6. using SkiaSharp;  
  7. using Entry = Microcharts.Entry;  
  8. using Microcharts.Droid;  
  9.   
  10. namespace App1  
  11. {  
  12.     [Activity(Label = "App1", MainLauncher = true, Icon = "@drawable/icon")]  
  13.     public class MainActivity : Activity  
  14.     {  
  15.         List<Entry> entries = new List<Entry>  
  16.         {  
  17.             new Entry(200)  
  18.             {  
  19.                 Color=SKColor.Parse("#FF1943"),  
  20.                 Label ="January",  
  21.                 ValueLabel = "200"  
  22.             },  
  23.             new Entry(400)  
  24.             {  
  25.                 Color = SKColor.Parse("00BFFF"),  
  26.                 Label = "March",  
  27.                 ValueLabel = "400"  
  28.             },  
  29.             new Entry(-100)  
  30.             {  
  31.                 Color =  SKColor.Parse("#00CED1"),  
  32.                 Label = "Octobar",  
  33.                 ValueLabel = "-100"  
  34.             },  
  35.             };  
  36.         protected override void OnCreate(Bundle bundle)  
  37.         {  
  38.             base.OnCreate(bundle);  
  39.   
  40.             // Set our view from the "main" layout resource  
  41.             SetContentView (Resource.Layout.Main);  
  42.             var chartView = FindViewById<ChartView>(Resource.Id.chartView);  
  43.             var chartview2 = FindViewById<ChartView>(Resource.Id.Chart2);  
  44.             var chartview3 = FindViewById<ChartView>(Resource.Id.Chart3);  
  45.             var chartview4 = FindViewById<ChartView>(Resource.Id.Chart4);  
  46.             var chartview5 = FindViewById<ChartView>(Resource.Id.Chart5);  
  47.             var chartview6 = FindViewById<ChartView>(Resource.Id.Chart6);  
  48.             
  49.             var chart = new RadialGaugeChart() { Entries = entries };  
  50.             var chart2 = new LineChart() { Entries = entries };  
  51.             var chart3 = new DonutChart() { Entries = entries };  
  52.             var chart4 = new PointChart() { Entries = entries };  
  53.             var chart5 = new RadarChart() { Entries = entries };  
  54.             var chart6 = new BarChart() { Entries = entries };  
  55.             chartView.Chart = chart;  
  56.             chartview2.Chart = chart2;  
  57.             chartview4.Chart = chart3;  
  58.             chartview3.Chart = chart4;  
  59.             chartview5.Chart = chart5;  
  60.             chartview6.Chart = chart6;  
  61.             //  https://stackoverflow.com/questions/47407895/exception-while-loading-assemblies-system-io-filenotfoundexception-could-not-l  
  62.   
  63.         }  
  64.     }  
  65. }  
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.
  1. var entries = new[]  
  2.             {  
  3.             new Entry(200)  
  4.             {  
  5.                 Label = "January",  
  6.                 ValueLabel = "200",  
  7.   
  8.                 Color = SKColor.Parse(HexConverter())  
  9.             },  
  10.             new Entry(400)  
  11.             {  
  12.                 Label = "February",  
  13.                 ValueLabel = "400",  
  14.                 Color = SKColor.Parse(HexConverter())  
  15.             },  
  16.             new Entry(-100)  
  17.             {  
  18.                 Label = "March",  
  19.                 ValueLabel = "-100",  
  20.                 Color = SKColor.Parse(HexConverter())  
  21.             }  
  22.         };  
  23.             //var chart = new BarChart() { Entries = entries };  
  24.   
  25.             var chartView = view.FindViewById<ChartView>(Resource.Id.chartView1);  
  26.             var chartview2 = view.FindViewById<ChartView>(Resource.Id.chartView2);  
  27.             var chartview3 = view.FindViewById<ChartView>(Resource.Id.chartView3);  
  28.             var chartview4 = view.FindViewById<ChartView>(Resource.Id.chartView4);  
  29.             var chartview5 = view.FindViewById<ChartView>(Resource.Id.chartView5);  
  30.             var chartview6 = view.FindViewById<ChartView>(Resource.Id.chartView6);  
  31.   
  32.             var chart = new RadialGaugeChart() { Entries = entries };  
  33.             var chart2 = new LineChart() { Entries = entries };  
  34.             var chart3 = new DonutChart() { Entries = entries };  
  35.             var chart4 = new PointChart() { Entries = entries };  
  36.             var chart5 = new RadarChart() { Entries = entries };  
  37.             var chart6 = new BarChart() { Entries = entries };  
  38.               
  39.             chartView.Chart = chart;  
  40.             chartview2.Chart = chart2;  
  41.             chartview4.Chart = chart3;  
  42.             chartview3.Chart = chart4;  
  43.             chartview5.Chart = chart5;  
  44.             chartview6.Chart = chart6;  
  45.   
  46.               
  47.           
  48.         private static string HexConverter()  
  49.         {  
  50.             Android.Graphics.Color c = new Android.Graphics.Color((int)(Java.Lang.Math.Random() * 0x1000000));  
  51.             return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");  
  52.         }  
Finally, we have successfully created Xamarin Android Microcharts application.