~/overview/1.2.install.md

Installation and first chart

At this point you must enable the include prerelease checkbox to find LiveCharts NuGet packages

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.

Select your target platforms:

Install 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 Browse tab search for LiveChartsCore.SkiaSharpView.Uno.WinUI (check the include prerelease checkbox), finally check all the projects to install LiveCharts on all the platforms in our project.

Notice this guide is for Uno.WinUI if you need the UWP platform you must install LiveChartsCore.SkiaSharpView.Uno, you can find that guide here.

Add a chart to the UI

Let's start by defining a view model for our 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; // 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 Shared project go to 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"
    xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Uno.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, ensure the startup project is UnoApp.Mobile and browse for an Android emulator, if you do not see any, try re-starting visual studio, if this is your first time running an emulator, 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: