Xamarin.Forms - Microcharts App

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.