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;
  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);
  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);
  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
  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",
  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 };
  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);
  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 };
  39. chartView.Chart = chart;
  40. chartview2.Chart = chart2;
  41. chartview4.Chart = chart3;
  42. chartview3.Chart = chart4;
  43. chartview5.Chart = chart5;
  44. chartview6.Chart = chart6;
  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.