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()
{
}
}