Xamarin.Forms - Microcharts App

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

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

 

 

PointChart

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

 

LineChart

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

 

DonutChart

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

 

RadialGaugeChart

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

 

RadarChart

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

xmlns:forms="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms"

XAML code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MicrochartsApp"
             x:Class="MicrochartsApp.MainPage"
             xmlns:forms="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms">
    <ScrollView>
        <StackLayout Orientation="Vertical">

        <forms:ChartView x:Name="Chart1"
                               HeightRequest="150"/>
        <forms:ChartView x:Name="Chart2"
                               HeightRequest="150"
                             />
        <forms:ChartView x:Name="Chart3"
                             HeightRequest="150"/>
        <forms:ChartView x:Name="Chart4"
                             HeightRequest="150"/>
        <forms:ChartView x:Name="Chart5"
                             HeightRequest="150"/>
        <forms:ChartView x:Name="Chart6"
                         HeightRequest="160"/>
        </StackLayout>
    </ScrollView>



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

using Microcharts;
using SkiaSharp;
using Microcharts.Forms;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Entry = Microcharts.Entry;


namespace MicrochartsApp
{
    public partial class MainPage : ContentPage
    {
        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"
            },
            };
        public MainPage()
        {
            InitializeComponent();


            Chart1.Chart = new RadialGaugeChart() { Entries = entries };
            Chart2.Chart = new LineChart() { Entries = entries };
            Chart3.Chart = new DonutChart() { Entries = entries };
            Chart4.Chart = new BarChart() { Entries = entries };
            Chart5.Chart = new PointChart() { Entries = entries };
            //Chart6.Chart = new RadarChart() { Entries = entries };
        }
    }
}

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.