Installation and first chart

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

Maui keeps evolving and changing in every preview, this documentation might be improved in the future as Maui matures.

Install from NuGet

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


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();
                .UseSkiaSharp(true) // mark
                .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"
            <lvc:CartesianChart<!-- mark -->
                Series="{Binding Series}"><!-- mark -->
            </lvc:CartesianChart><!-- mark -->

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

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 App.xaml.cs file, then edit the it as follows.

using Application = Microsoft.Maui.Controls.Application;
using LiveChartsCore;// mark
using LiveChartsCore.SkiaSharpView;// mark

namespace MauiSample
    public partial class App : Application
        public App()

            MainPage = new AppShell();

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