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 and LiveCharts Handlers

You must register SkiaSharp and LiveCharts handlers now, browse for the MauiProgram class and add .UseSkiaSharp() and .UseLiveCharts():

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() // mark
                .UseLiveCharts() // mark
                .UseMauiApp<App>()
                .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;
using LiveChartsCore.SkiaSharpView.Drawing.Geometries;

namespace MauiSample;

public class ViewModel
{
    public ISeries[] Series { get; set; } = [
        new ColumnSeries<int>(3, 4, 2),
        new ColumnSeries<int>(4, 2, 6),
        new ColumnSeries<double, DiamondGeometry>(4, 3, 4)
    ];
}

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;

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-rc5/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);
}