Avalonia UI: Introduction to LiveCharts2 library in Avalonia MVVM project

Installation and first chart

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

Create a new Avalonia project and name the project and the solution AvaloniaSample, and select .NET 6.0 as the framework, if the framework is not available for you, you can also use .NET 5.0, .NET core 3.1 or .NET 4.6.2 or greater, if you need help to get started with Avalonia please see the Avalonia docs.

Install from NuGet

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

> LiveChartsCore.SkiaSharpView.Avalonia

Create a View Model

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

using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;

namespace AvaloniaSample
{
    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.axaml 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:

<Window x:Class="MyApp"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AvaloniaSample"
    xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Avalonia">

    <Window.DataContext>
        <local:ViewModel />
    </Window.DataContext>
    <lvc:CartesianChart
        Series="{Binding Series}">
    </lvc:CartesianChart>
</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 or add 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.axaml.cs file, then add the settings you need:

using Avalonia;
using Avalonia.Controls.ApplicationLifetimes;
using Avalonia.Markup.Xaml;
using LiveChartsCore; 
using LiveChartsCore.Kernel;
using LiveChartsCore.SkiaSharpView; 
using SkiaSharp;

namespace AvaloniaSample;
public class App : Application
{
    public override void Initialize()
    {
        AvaloniaXamlLoader.Load(this);
        LiveCharts.Configure(config => 
            config 
                // you can override the theme 
                // .AddDarkTheme()  
                // In case you need a non-Latin based font, you must register a typeface for SkiaSharp
                .HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('汉')) // <- Chinese 
                //.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('أ'))  // <- Arabic 
                //.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('あ')) // <- Japanese 
                //.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('헬')) // <- Korean 
                //.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('Ж'))  // <- Russian 
                // finally register your own mappers
                // you can learn more about mappers at:
                // https://lvcharts.com/docs/avalonia/2.0.0-beta.850/Overview.Mappers
                .HasMap<City>((city, point) => 
                { 
                    // here we use the index as X, and the population as Y 
                    point.Coordinate = new(point.Index, city.Population); 
                }) 
            // .HasMap<Foo>( .... ) 
            // .HasMap<Bar>( .... ) 
            ); 
    }
    public override void OnFrameworkInitializationCompleted()
    {
        if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
        {
            desktop.MainWindow = new MainWindow();
        }
        base.OnFrameworkInitializationCompleted();
    }
    public record City(string Name, double Population);
}