~/overview/1.2.install.md

Installation and first chart

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

Open visual studio 2022, select "Create a new project", then select the Blank App, Packed with WAP (WinUI 3 In Desktop) template.

Name the project and the solution WinUISample, and use the default target version.

Install from NuGet

Now install LiveCharts from NuGet. If you need more help to install a package from NuGet, please follow this guide.

LiveChartsCore.SkiaSharpView.WinUI

Create a View Model

After the package is installed add a new class to your project as follows:

using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;

namespace WinUISample
{
    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
                }
            };
    }
}

Add the chart control to the UI

Finally go to the MainWindow.xaml file and add the LiveCharts namespace, don't forget to add also the namespace of your ViewModel class, then add a CartesianChart control and bind the Series property:

<!-- mark -skip 3 -take 2 -->
<Window x:Class="WinUISample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:App3"
    xmlns:lvc="using:LiveChartsCore.SkiaSharpView.WinUI">

    <Window.DataContext>
        <local:ViewModel /><!-- mark -->
    </Window.DataContext>

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

</Window>

And that's it, start your application and you will see the chart in your main window.

Configure themes, fonts or mappers (Optional)

Optionally you could configure LiveCharts to add a theme, register a global font, enable right to left tooltips or a custom mapper for a type, when you need a non-Latin font you must register a typeface so SkiaShap can render the text correctly, add the following code when your application starts:

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

using Microsoft.UI.Xaml;
using LiveChartsCore; // mark
using LiveChartsCore.SkiaSharpView; // mark
using SkiaSharp; // mark

namespace WinUISample;

/// <summary>
/// Provides application-specific behavior to supplement the default Application class.
/// </summary>
public partial class App : Application
{
    public record City(string Name, double Population);

    /// <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()
    {
        InitializeComponent();
    }

    /// <summary>
    /// 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)
    {
        m_window = new MainWindow();
        m_window.Activate();

        LiveCharts.Configure(config => // mark
            config // mark
                // you can override the theme 
                // .AddDarkTheme() // mark 

                // In case you need a non-Latin based font, you must register a typeface for SkiaSharp
                //.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('汉')) // <- Chinese // mark
                //.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('あ')) // <- Japanese // mark
                //.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('헬')) // <- Korean // mark
                //.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('Ж'))  // <- Russian // mark

                //.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('أ'))  // <- Arabic // mark
                //.UseRightToLeftSettings() // Enables right to left tooltips // mark

                // finally register your own mappers
                // you can learn more about mappers at:
                // https://livecharts.dev/docs/winui/2.0.0-rc2/Overview.Mappers

                // here we use the index as X, and the population as Y // mark
                .HasMap<City>((city, index) => new(index, city.Population)) // mark
                // .HasMap<Foo>( .... ) // mark
                // .HasMap<Bar>( .... ) // mark
            ); // mark
    }

    private Window m_window;
}