Build together, debug together. Join the community on Discord.→

LiveCharts Announces Support for Uno Platform

12 May 2022

Imagine combining LiveCharts2 (v2), the evolution of LiveCharts (v0), with the power of Uno Platform. The ability to integrate beautiful, animated, automatically updated, cross-platform, object-oriented and easy-to-use charts opens many possibilities for data visualization-driven applications!

The LiveCharts team has been working hard at expanding support for Uno Platform, and you can now integrate charts, maps, and gauges everywhere Uno Platform runs. LiveCharts2 for Uno Platform contains the following controls:

Cartesian Chart Control
Pie Chart Control

Polar Chart Control
Geo Map Control

Today, LiveCharts2 for Uno Platform is in a preview and is available to everyone via the NuGet package for Uno. You can also visit the new website, which houses the library, and docs, which are fully integrated with Uno Platform and the API explorer. So take it for a spin and see how easy it is to get started using this brand-new suite of controls in your Uno Platform Applications.

1. Install Uno Platform

Before starting with Uno Platform, ensure you have installed all the prerequisites. For Visual Studio, you can get started here; you can find help on how to install the mentioned workloads here.

2. Create a new Uno Platform project

Open visual studio 2022, select “Create a new project” then select the Uno Platform App template.

Select your target platforms:

Name the project and the solution UnoApp.

3. Install LiveCharts from NuGet

You can install LiveChart from NuGet in the Solution Explorer, right click on your solution, then Manage NuGet Packages for Solution, ensure the package source is nuget.org then in the browser tab, search for LiveChartsCore.SkiaSharpView.Uno.WinUI (check the include prerelease checkbox), and finally, check all the projects to install LiveCharts on all the platforms in our project.

4. Add a Chart to the UI

Let’s start by defining a view model for your chart, in the Solution Explorer go to the Shared project and then open the MainPage.xaml.cs file, and add the next view model class:

				
					using Windows.UI.Xaml.Controls;
using LiveChartsCore; 
using LiveChartsCore.SkiaSharpView; 

namespace UnoApp;

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }
}

				
					public class ViewModel 
{ 
    public ISeries[] Series { get; set; }  
        = new ISeries[] 
        { 
            new LineSeries<double> 
            { 
                Values = new double[] { 2, 1, 3, 5, 3, 4, 6 }, 
                Fill = null 
            } 
        }; 
}

Now let’s add the control to the UI, in the Shared project go to MainPage.xaml file, and add the namespace for LiveCharts (lvc) and for the view model we just created (local).

Set the Page.DataSource to our view model, and finally add the chart and bind the Series property to our view model.

				
					<Page
    x:Class="UnoApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UnoApp"
    xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Uno"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.DataContext>
        <local:ViewModel />
    </Page.DataContext>

    <lvc:CartesianChart
        Series="{Binding Series}">
    </lvc:CartesianChart>

</Page>

Now run the application, and ensure the startup project is UnoApp.Mobile and browse for an Android emulator.

Now try running the UWP, WPF or GTK projects, the chart is ready to run everywhere! (we keep working on MacOS and iOS).

Summary

As you can see, getting started with the suite of controls in LiveCharts2 is easy. Now you can start adding charts, maps and gauges to your UI using the LiveCharts2 cross-platform library.

There are a lot of samples already built for Uno Platform, every card there opens an example that is ready to run in Uno Platform. The team is continuously improving the library since it is currently still in a beta phase, and continues to improve its looks, performance, and features as we progress to the final release.

Next Steps

If you are new to Uno Platform, follow our official getting started guide. (5 min to complete) This is part 1 of 2 Getting Started tutorials. You can find the second tutorial here.