Installation and first chart

Before getting started with Uno, 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.

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

Name your project and solution UnoApp and select the Default template and click Create.

Install from NuGet

You can install LiveChart from NuGet, in the Solution Explorer right click on the UnoApp project, then Manage Nuget Packages, in the Browse tab search for LiveChartsCore.SkiaSharpView.Uno.WinUI (check the include prerelease checkbox), finally click on Install.

Add a chart to the UI

Let's start by defining a view model for our chart, in the Solution Explorer find the UnoApp project and then open the Presentation/MainPage.xaml.cs file, and add the next view model class:

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

namespace UnoApp;

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

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

Now let's add the control to the UI, in the Presentation/MainPage.xaml file, add the namespace for LiveCharts (lvc) and for the view model we just created (local).

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

<!-- mark -skip 4 -take 2 -->
<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.Presentation"
    xmlns:lvc="using:LiveChartsCore.SkiaSharpView.WinUI"
    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 /><!-- mark -->
    </Page.DataContext>

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

</Page>

Now run the application, as you probably already know, an Uno Application can run on multiple platforms, you can decide which platform to run by opening the Platforms folder then right click on the desired platform then on Set as Startup Project:

Ensure the startup project is Platforms/UnoApp.Mobile and browse for an Android emulator, if this is your first time running an emulator with VisualStudio, you need to install it by clicking on the Android Device Manager and adding a new device.

And that's it, we have LiveCharts2 running on Android!.

Start the project for the rest of the platforms, the chart is ready to run everywhere!.

Configure themes and mappers (Optional)

Optionally you could configure LiveCharts to add a theme or a custom mapper, add the following code when your application starts:

Go to the Solution Explorer and browse for UnoApp.Shared/App.xaml.cs file, then edit the it as follows.

using Microsoft.Extensions.Logging;
using System;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
using LiveChartsCore;// mark
using LiveChartsCore.SkiaSharpView;// mark

namespace UnoApp
{
    /// <summary>
    /// Provides application-specific behavior to supplement the default Application class.
    /// </summary>
    public sealed partial class App : Application
    {
        private Window _window;

        /// <summary>
        /// Initializes the singleton application object.  This is the first line of authored code
        /// executed, and as such is the logical equivalent of main() or WinMain().
        /// </summary>
        public App()
        {
            InitializeLogging();

            this.InitializeComponent();

#if HAS_UNO || NETFX_CORE
            this.Suspending += OnSuspending;
#endif
        }

        /// <

        /// Invoked when the application is launched normally by the end user.  Other entry points
        /// will be used such as when the application is launched to open a specific file.
        /// </summary>
        /// <param name="args">Details about the launch request and process.</param>
        protected override void OnLaunched(LaunchActivatedEventArgs args) // mark
        {
#if DEBUG
            if (System.Diagnostics.Debugger.IsAttached)
            {
                // this.DebugSettings.EnableFrameRateCounter = true;
            }
#endif

#if NET6_0_OR_GREATER && WINDOWS
            _window = new Window();
            _window.Activate();
#else
            _window = Windows.UI.Xaml.Window.Current;
#endif

            var rootFrame = _window.Content as Frame;

            // Do not repeat app initialization when the Window already has content,
            // just ensure that the window is active
            if (rootFrame == null)
            {
                // Create a Frame to act as the navigation context and navigate to the first page
                rootFrame = new Frame();

                rootFrame.NavigationFailed += OnNavigationFailed;

                if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
                {
                    // TODO: Load state from previously suspended application
                }

                // Place the frame in the current Window
                _window.Content = rootFrame;
            }

#if !(NET6_0_OR_GREATER && WINDOWS)
            if (args.PrelaunchActivated == false)
#endif
            {
                if (rootFrame.Content == null)
                {
                    // When the navigation stack isn't restored navigate to the first page,
                    // configuring the new page by passing required information as a navigation
                    // parameter
                    rootFrame.Navigate(typeof(MainPage), args.Arguments);
                }
                // Ensure the current window is active
                _window.Activate();
            }

            LiveCharts.Configure(config =>// mark
                config// mark
                    // registers SkiaSharp as the library backend
                    // REQUIRED unless you build your own
                    .AddSkiaSharp()// mark

                    // adds the default supported types
                    // OPTIONAL but highly recommend
                    .AddDefaultMappers()// mark

                    // select a theme, default is Light
                    // OPTIONAL
                    //.AddDarkTheme()
                    .AddLightTheme()// mark

                    // finally register your own mappers
                    // you can learn more about mappers at:
                    // ToDo add website link...
                    .HasMap<City>((city, point) =>// mark
                    {// mark
                        point.PrimaryValue = city.Population;// mark
                        point.SecondaryValue = point.Context.Index;// mark
                    })// mark
                    // .HasMap<Foo>( .... )// mark
                    // .HasMap<Bar>( .... )// mark
                );// mark            
        }

        // rest of the file ignored in this exmaple
    }
}