Home

Install NuGet Package

Install either Microcharts or Microcharts.Forms depending on if you're working on a Xamarin.Forms project or not.

Setup Data Entires

we need data to populate our chart, below is a sample of what that looks like.

var entries = new[]
{
    new ChartEntry(212)
    {
        Label = "UWP",
        ValueLabel = "112",
        Color = SKColor.Parse("#2c3e50")
    },
    new ChartEntry(248)
    {
        Label = "Android",
        ValueLabel = "648",
        Color = SKColor.Parse("#77d065")
    },
    new ChartEntry(128)
    {
        Label = "iOS",
        ValueLabel = "428",
        Color = SKColor.Parse("#b455b6")
    },
    new ChartEntry(514)
    {
        Label = "Forms",
        ValueLabel = "214",
        Color = SKColor.Parse("#3498db")
    }
};

Choose a chart type

Microcharts has a handful of charts to choose from:

• Bar Chart
• Donut Chart
• Line Chart
• Pie Chart
• Point Chart
• Radar Chart
• Radial Gauge Chart

Setup our chart view

we now have to present the chart on our app.

Xamarin.Android

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout 
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <microcharts.droid.ChartView
            android:id="@+id/chartView"
            android:layout_width="match_parent"
            android:layout_height="160dp" />
    </LinearLayout>
</ScrollView>

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);

    SetContentView(Resource.Layout.Main);

    // ... our chart data and chart type here ...

    var chartView = FindViewById<ChartView>(Resource.Id.chartView);
    chartView.Chart = chart;
}

Xamarin.iOS

public override void ViewDidLoad()
{
    base.ViewDidLoad();

    // ... our chart data and chart type here ...

    var chartView = new ChartView
    {
        Frame = new CGRect(0, 0, View.Bounds.Width, 250),
        AutoresizingMask = UIViewAutoresizing.FlexibleWidth,
        Chart = chart
    };

    View.AddSubview(chartView);
}

Xamarin.MacOS

public override void ViewDidLoad()
{
	base.ViewDidLoad();

	// ... our chart data and chart type here ...

	var chartView = new ChartView
	{
            Frame = View.Bounds,
            AutoresizingMask = NSViewResizingMask.WidthSizable | NSViewResizingMask.HeightSizable,
            Chart = chart,
	};

        View.AddSubview(chartView);
}

Xamarin.Forms

<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:microcharts="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms" 
    xmlns:local="clr-namespace:Microcharts.Samples.Forms" 
    x:Class="Microcharts.Samples.Forms.MainPage">

    <microcharts:ChartView x:Name="chartView" />

</ContentPage>

protected override void OnAppearing()
{
    base.OnAppearing();

    // ... our chart data and chart type here ...

    chartView.Chart = chart;
}

UWP

<Page
    x:Class="Microcharts.Samples.Uwp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Microcharts.Samples.Uwp"
    xmlns:microcharts="using:Microcharts.Uwp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <microcharts:ChartView x:Name="chartView" />

</Page>

public MainPage()
{
    this.InitializeComponent();

    // ... our chart data and chart type here ...

    chartView.Chart = chart;
}