Xamarin.Forms - Microcharts App

In this article, we are going to learn how to display micro-charts in single line code for Xamarin.Forms.

Introduction

Displaying charts in mobile apps has always been a great way to offer users a clear overview of numerical data. I want this task to be as easy as writing a few lines of code, but I couldn't find a straight-forward way to achieve this. This is why I started exploring SkiaSharp and created Microcharts.
 
nuGet package : Xamarin.Forms = search "Microcharts.Forms"
   
This simple plugin can display microcharts in Xamarin.Forms.

 
 
Available charts Microcharts.Forms Plugin
  • Barchart
  • PointChart
  • LineChart
  • DonutChart
  • RadialGaugeChart
  • RadarChart

Chart Types

BarChart
  1.  Chartview.Chart =  new BarChart(){Entries = entries}; 
 
 
PointChart
  1. Chartview.Chart =  new PointChart(){Entries = entries}; 
 
LineChart
  1. Chartview.Chart =  new LineChart(){Entries = entries}; 
 

DonutChart
  1. Chartview.Chart =  new DonutChart(){Entries = entries}; 
 

RadialGaugeChart
  1. Chartview.Chart =  new RadialGaugeChart(){Entries = entries}; 
 

RadarChart
  1. Chartview.Chart =  new RadartChart(){Entries = entries}; 
 
 
Step 1

You can create Xamarin.Forms app by going to File >> New >> Visual C# >> Cross Platform >> Cross Platform App (Xamarin.Native or Xamarin.Forms), give the application name and press OK.

(Project name: MicrochartsApp)
 
Step 2

Now, add the following NuGet Package for your projects.
  • Microcharts.Forms

    For that, go to Solution Explorer and select your solution. Right-click and select "Manage NuGet Packages for the Solution". Now, select the following NuGet Package, select your project, and install it.
  • Microcharts.Forms

       
Step 3

To display a chart, we'll need to host it in a ChartView.
      
After installing NuGet packages, add a ChartView control to your project. For that, go to Solution Explorer >> MicrochartsApp(PCL) >>> Double-click on MainPage.xaml. After opening this, you can add assembly and XAML code to your project. Here is the code for this page.
 
Assembly
  1. xmlns:forms="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms"   
XAML code
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:MicrochartsApp"  
  5.              x:Class="MicrochartsApp.MainPage"  
  6.              xmlns:forms="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms">  
  7.     <ScrollView>   
  8.         <StackLayout Orientation="Vertical">  
  9.           
  10.         <forms:ChartView x:Name="Chart1"  
  11.                                HeightRequest="150"/>  
  12.         <forms:ChartView x:Name="Chart2"  
  13.                                HeightRequest="150"  
  14.                              />  
  15.         <forms:ChartView x:Name="Chart3"  
  16.                              HeightRequest="150"/>  
  17.         <forms:ChartView x:Name="Chart4"  
  18.                              HeightRequest="150"/>  
  19.         <forms:ChartView x:Name="Chart5"  
  20.                              HeightRequest="150"/>  
  21.         <forms:ChartView x:Name="Chart6"  
  22.                          HeightRequest="160"/>  
  23.         </StackLayout>  
  24.     </ScrollView>  
  25.   
  26.   
  27.   
  28. </ContentPage>   
 
 
Step 4

In this step, add data entries. For that, open Solution Explorer >> MicrochartsApp(PCL) >>click open MainPage.xaml.cs. This class code is given below.

Every chart displays via Microcharts and consumes a set of data entries. They will always have the same structure regardless of the chart type that you want to display.
 
Each entry
  •  Floating number representing it's value is required.
  •  Label - what your entry is associated with.
  •  ValueLabel - format your value
  •  Color - entry
  1. using Microcharts;  
  2. using SkiaSharp;  
  3. using Microcharts.Forms;  
  4. using System;  
  5. using System.Collections.Generic;  
  6. using System.Linq;  
  7. using System.Text;  
  8. using System.Threading.Tasks;  
  9. using Xamarin.Forms;  
  10. using Entry = Microcharts.Entry;  
  11.   
  12.   
  13. namespace MicrochartsApp  
  14. {  
  15.     public partial class MainPage : ContentPage  
  16.     {  
  17.         List<Entry> entries = new List<Entry>  
  18.         {  
  19.             new Entry(200)  
  20.             {  
  21.                 Color=SKColor.Parse("#FF1943"),  
  22.                 Label ="January",  
  23.                 ValueLabel = "200"  
  24.             },  
  25.             new Entry(400)  
  26.             {  
  27.                 Color = SKColor.Parse("00BFFF"),  
  28.                 Label = "March",  
  29.                 ValueLabel = "400"  
  30.             },  
  31.             new Entry(-100)  
  32.             {  
  33.                 Color =  SKColor.Parse("#00CED1"),  
  34.                 Label = "Octobar",  
  35.                 ValueLabel = "-100"  
  36.             },  
  37.             };  
  38.         public MainPage()  
  39.         {  
  40.             InitializeComponent();  
  41.   
  42.               
  43.             Chart1.Chart = new RadialGaugeChart() { Entries = entries };  
  44.             Chart2.Chart = new LineChart() { Entries = entries };  
  45.             Chart3.Chart = new DonutChart() { Entries = entries };  
  46.             Chart4.Chart = new BarChart() { Entries = entries };  
  47.             Chart5.Chart = new PointChart() { Entries = entries };  
  48.             //Chart6.Chart = new RadarChart() { Entries = entries };  
  49.         }  
  50.     }  


Step 5

Now, go to "Build" menu and configure your startup project. After configuring, run your project. You will have the result like below.

 
 
Finally, we have successfully created Xamarin.Forms Microcharts application.