Installation and first chart

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

This sample uses VisualStudio 2022, Xamarin 5.0 and the Flyout template, Xamarin is in constant evolution and there is a chance that something has changed at the moment you are reading this, if this article is not useful enough, feel free to open a new issue to report it or create a PR with a better sample.

Open visual studio 2022, select "Create a new project", then select the Mobile App (Xamarin.Forms) template.

Name the project and the solution XamarinSample, and select the Flyout template.

Install from NuGet

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

Install-Package LiveChartsCore.SkiaSharpView.XamarinForms

Create a View Model

After the package is installed, go to the ViewModels folder and add a new class as follows:

using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using System.Collections.Generic;

namespace XamarinSample.ViewModels
    public class ChartViewModel
        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

Now for simplicity, we will change the ItemsPage.xaml view in this template (Flyout) to display our chart ChartViewModel, Go to the Views folder and then open the ItemsPage.xaml, add the LiveCharts namespace to the view and replace the content of the ItemsPage only with a cartesian chart, bind the Series property to the ChartViewModel.Series property.

<ContentPage x:Class="MyApp"
    xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Xamarin.Forms;assembly=LiveChartsCore.SkiaSharpView.XamarinForms"><!-- mark -->

    <lvc:CartesianChart<!-- mark -->
        Series="{Binding Series}"><!-- mark -->
    </lvc:CartesianChart><!-- mark -->


Now in the code behind of your ItemsPage, set the BindingContext property to a new instance of the ChartViewModel class we created above.

using Xamarin.Forms;
using XamarinSample.ViewModels;

namespace XamarinSample.Views
    public partial class ItemsPage : ContentPage
        public ItemsPage()

            BindingContext = new ChartViewModel(); // mark

        protected override void OnAppearing()

And that's it, when you app starts our chart will be displayed instead of the ItemsPage view.


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 OnStart method as follows.

using Xamarin.Forms;
using LiveChartsCore;// mark
using LiveChartsCore.SkiaSharpView;// mark

namespace XamarinSample
    public partial class App : Application

        public App()

            MainPage = new AppShell();

        protected override void OnStart()
            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

        protected override void OnSleep()

        protected override void OnResume()