Installation and first chart

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.Maui

Register SkiaSharp

This is a requirement by SkiaSharp, in the solution explorer, browse for the MauiProgram class and register SkiaSharp in the application:

using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Hosting;
using SkiaSharp.Views.Maui.Controls.Hosting; // mark

namespace MauiApp
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseSkiaSharp(true) // mark
                .UseMauiApp()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });

            return builder.Build();
        }
    }
}

Create a View Model

Now let's add a simple chart, add a new class to your project as follows:

using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;

namespace MauiSample;

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 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 4 -take 2 -->
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="MauiSample.Lines.Basic.View"
             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiSample;assembly=MauiSample"
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Maui;assembly=LiveChartsCore.SkiaSharpView.Maui">
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
	<ContentPage.Content>
        <Grid>
            <lvc:CartesianChart<!-- mark -->
                Series="{Binding Series}"><!-- mark -->
            </lvc:CartesianChart><!-- mark -->
        </Grid>
    </ContentPage.Content>
</ContentPage>

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

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 LiveChartsCore;
using LiveChartsCore.SkiaSharpView; // mark
using SkiaSharp; // mark

namespace MauiSample;

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        MainPage = new AppShell();
    }

    protected override void OnStart()
    {
        UserAppTheme = AppTheme.Light;
        base.OnStart();

        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/maui/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
    }

    public record City(string Name, double Population);
}