Charts in Xamarin Forms App
Tags: barchart, chart, chartinandroid, chartinxamarinfor
Published: 2019-11-13 17:17:39

---
title: Charts in Xamarin Forms App
published: true
date: 2019-08-03 18:47:00 UTC
tags: Bar chart,Chart,Chart in Android,Chart in Xamarin For
canonical_url: https://logeshpalani.blogspot.com/2019/08/microcharts-in-xamarin-forms-application.html
---

  

**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 straightforward 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.

  

[![](https://1.bp.blogspot.com/-AtohAacfQss/XUXMPY-RUlI/AAAAAAAAOzI/IkhGYk2fZW4zkYx38rxyh1uepuT3P04ggCLcBGAs/s320/result.gif)](https://1.bp.blogspot.com/-AtohAacfQss/XUXMPY-RUlI/AAAAAAAAOzI/IkhGYk2fZW4zkYx38rxyh1uepuT3P04ggCLcBGAs/s1600/result.gif)

  

**Available charts Microcharts.Forms Plugin**

- Barchart
- PointChart
- LineChart
- DonutChart
- RadialGaugeChart
- RadarChart

**Chart Types**

1. BarChart

  

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

[![](https://1.bp.blogspot.com/-J43kF7Cv-tc/XUXNCE9nlJI/AAAAAAAAOzU/7LP35uJjVugEgWRaO__5yJAfnZYyx8RnwCLcBGAs/s320/BarChartNew.jpg)](https://1.bp.blogspot.com/-J43kF7Cv-tc/XUXNCE9nlJI/AAAAAAAAOzU/7LP35uJjVugEgWRaO__5yJAfnZYyx8RnwCLcBGAs/s1600/BarChartNew.jpg)
  
2. PointChart  

  

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

[![](https://1.bp.blogspot.com/-tBioRZZBfUA/XUXNuT66BvI/AAAAAAAAOzc/P4-xsw9g-JAf4iAIF-j4_JQCx-gA7w0bQCLcBGAs/s320/PointChartNew.jpg)](https://1.bp.blogspot.com/-tBioRZZBfUA/XUXNuT66BvI/AAAAAAAAOzc/P4-xsw9g-JAf4iAIF-j4_JQCx-gA7w0bQCLcBGAs/s1600/PointChartNew.jpg)
  
3. LineChart  

  

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

[![](https://1.bp.blogspot.com/-BL-q_8ZuIWo/XUXOD0TvkbI/AAAAAAAAOzk/hkSv03UqgAEAbCMtKUwHAUPy2pjV6QIVwCLcBGAs/s320/LineChartNew.jpg)](https://1.bp.blogspot.com/-BL-q_8ZuIWo/XUXOD0TvkbI/AAAAAAAAOzk/hkSv03UqgAEAbCMtKUwHAUPy2pjV6QIVwCLcBGAs/s1600/LineChartNew.jpg)

  

4. DonutChart

  

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

  

[![](https://1.bp.blogspot.com/-p9V3FMg_KNk/XUXOwN1j0-I/AAAAAAAAOzw/TmE9HCFrKw0wTeFKKGC8O4OiVXt3rdtewCLcBGAs/s320/DonutChartNew.jpg)](https://1.bp.blogspot.com/-p9V3FMg_KNk/XUXOwN1j0-I/AAAAAAAAOzw/TmE9HCFrKw0wTeFKKGC8O4OiVXt3rdtewCLcBGAs/s1600/DonutChartNew.jpg)

5. RadialGaugeChart

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

  
  

[![](https://1.bp.blogspot.com/-CrmRh2Ede74/XUXPDH9RZdI/AAAAAAAAOz4/DoNpNDIwy0kDHpeHpCXcT_k2C_iHF8sIgCLcBGAs/s320/RadiaGuageChartNew.jpg)](https://1.bp.blogspot.com/-CrmRh2Ede74/XUXPDH9RZdI/AAAAAAAAOz4/DoNpNDIwy0kDHpeHpCXcT_k2C_iHF8sIgCLcBGAs/s1600/RadiaGuageChartNew.jpg)
  

6. RadarChart

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

[![](https://1.bp.blogspot.com/-v7XG5-634QY/XUXQ69wjuXI/AAAAAAAAO0E/w_UswtsnnwIvFXoo1ju7vxEItPhogd4AACLcBGAs/s320/RadarChartNew.png)](https://1.bp.blogspot.com/-v7XG5-634QY/XUXQ69wjuXI/AAAAAAAAO0E/w_UswtsnnwIvFXoo1ju7vxEItPhogd4AACLcBGAs/s1600/RadarChartNew.png)

  

**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

[![](https://1.bp.blogspot.com/-PAHaRFeYwo4/XUXRTwtyYFI/AAAAAAAAO0M/wvY4VytH8F8eFYwMDfa5wiB6tF09NJeaQCLcBGAs/s400/Nuget.png)](https://1.bp.blogspot.com/-PAHaRFeYwo4/XUXRTwtyYFI/AAAAAAAAO0M/wvY4VytH8F8eFYwMDfa5wiB6tF09NJeaQCLcBGAs/s1600/Nuget.png)

**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"  HeightRequest="150" /\>  
13.         \<forms:ChartView x:Name="Chart3"  
14.                              HeightRequest="150"/\>  
15.         \<forms:ChartView x:Name="Chart4"  
16.                              HeightRequest="150"/\>  
17.         \<forms:ChartView x:Name="Chart5"  
18.                              HeightRequest="150"/\>  
19.         \<forms:ChartView x:Name="Chart6"                                                          HeightRequest="160"/\>  
20.         \</StackLayout\>  
21.     \</ScrollView\>  
22. \</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.     }  
51. } 

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

  

[![](https://1.bp.blogspot.com/-AtohAacfQss/XUXMPY-RUlI/AAAAAAAAOzM/wMp3tKeKdlgIppsVWbMhyisUvR0qCpySwCEwYBhgL/s320/result.gif)](https://1.bp.blogspot.com/-AtohAacfQss/XUXMPY-RUlI/AAAAAAAAOzM/wMp3tKeKdlgIppsVWbMhyisUvR0qCpySwCEwYBhgL/s1600/result.gif)

  

  

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