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

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 RadarChart
{
    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 is displayed 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

• A floating number representing its 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 = "October",
                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 the "Build" menu and configure your startup project. After configuring, run your project. You will have the result below.

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