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

            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
                    //.AddDarkTheme()
                    .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
        }
    }
}