Skip to content
This repository has been archived by the owner on Mar 7, 2023. It is now read-only.

Create cross-platform (Xamarin, Windows, ...) simple charts.

License

Notifications You must be signed in to change notification settings

MoneyFox/Microcharts

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

70 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Microcharts

Microcharts is an extremely simple charting library for a wide range of platforms (see Compatibility section below), with shared code and rendering for all of them!

Gallery

gallery

Install

Available on NuGet NOTE: Since we had blocking issues with the nuget packages from the main repo we published our own.

NET Standard 2.0, Xamarin.iOS, Xamarin.Android, UWP

https://www.nuget.org/packages/MoneyFox.Microcharts/

Xamarin.Forms (.NET Standard 2.0)

https://www.nuget.org/packages/MoneyFox.Microcharts.Forms/

Quickstart

1°) Your chart will need a set of data entries.

var entries = new[]
{
    new Entry(200)
    {
        Label = "January",
        ValueLabel = "200",
	FillColor = SKColor.Parse("#266489")
    },
    new Entry(400)
    {
	Label = "February",
	ValueLabel = "400",
	FillColor = SKColor.Parse("#68B9C0")
    },
    new Entry(-100)
    {
	Label = "March",
	ValueLabel = "-100",
	FillColor = SKColor.Parse("#90D585")
    }
};

2°) Instanciate a chart from those entries

var chart = new BarChart() { Entries = entries };
// or: var chart = new PointChart() { Entries = entries };
// or: var chart = new LineChart() { Entries = entries };
// or: var chart = new DonutChart() { Entries = entries };
// or: var chart = new RadialGaugeChart() { Entries = entries };
// or: var chart = new RadarChart() { Entries = entries };

2°) Add it to your UI!

Xamarin.iOS

ios-screen

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

    var entries = // ... see 1°) above
    var chart = // ... see 2°) above

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

	this.View.AddSubview(chartView);
}

Xamarin.Android

android-screen

<?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);

    var entries = // ... see 1°) above
    var chart = // ... see 2°) above

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

UWP (Windows 10)

uwp-screen

<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();

    var entries = // ... see 1°) above
    var chart = // ... see 2°) above

    this.chartView.Chart = chart;
}

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();

    var entries = // ... see 1°) above
    var chart = // ... see 2°) above

    this.chartView.Chart = chart;
}

Xamarin.macOS

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

	var entries = // ... see 1°) above
	var chart = // ... see 2°) above

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

	this.View.AddSubview(chartView);
}

Tutorials

Usage

Available charts are BarChart, PointChart, LineChart, DonutChart, RadialGaugeChart, RadarChart. They all have several properties to tweak their rendering.

Those charts have a Draw method for platforms that haven't built in views.

Compatibility

Built in views are provided for UWP, Xamarin.Forms, Xamarin.iOS and Xamarin.Android, Xamarin.macOS, but any other .NET Standard 2.0 SkiaSharp supported platform is also compatible (see one of the included ChartView implementations for more details).

About

This project is just simple drawing on top of the awesome SkiaSharp library. The purpose is not to have an heavily customizable charting library. If you want so, simply fork the code, since all of this is fairly simple. Their is no interaction, nor animation at the moment.

Contributions

Contributions are welcome! If you find a bug please report it and if you want a feature please report it.

If you want to contribute code please file an issue and create a branch off of the current dev branch and file a pull request.

License

MIT © Aloïs Deniel

About

Create cross-platform (Xamarin, Windows, ...) simple charts.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • C# 100.0%