~/overview/1.2.install.md

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="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Xamarin.Forms;assembly=LiveChartsCore.SkiaSharpView.XamarinForms"><!-- mark -->

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

</ContentPage>

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

            BindingContext = new ChartViewModel(); // mark
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();
        }
    }
}

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

=

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

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

namespace XamarinSample;

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

        MainPage = new AppShell();
    }

    protected override void OnStart()
    {
        LiveCharts.Configure(config => // mark
            config // mark
                // you can override the theme
                .AddLightTheme() // optional, this is the default 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('أ'))  // <- Arabic // 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/xamarin/2.0.0-beta.950/Overview.Mappers
                //.HasMap<City>((city, point) => // mark
                //{ // mark
                //    // here we use the index as X, and the population as Y // mark
                //point.Coordinate = new(point.Index, city.Population); // mark
                //}) // mark
                // .HasMap<Foo>( .... ) // mark
                // .HasMap<Bar>( .... ) // mark
                ); // mark
    }

    protected override void OnSleep()
    {
    }

    protected override void OnResume()
    {
    }
}