Installation and first chart
At this point you must enable the include prerelease checkbox to find LiveCharts NuGet packages
Open visual studio 2022, select "Create a new project", then select the WPF Application template.
Name the project and the solution WpfSample, and select .NET 6.0 as the framework, if the framework is not available for you, you can also use .NET 5.0, .NET core 3.1 or .NET 4.6.2 or greater.
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.WPF
Create a View Model
After the package is installed add a new class to your project as follows:
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
namespace WpfSample
{
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 go to the MainWindow.xaml
file and 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 3 -take 2 -->
<Window x:Class="MyApp"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WPFSample"
xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF">
<Window.DataContext>
<local:ViewModel /><!-- mark -->
</Window.DataContext>
<lvc:CartesianChart<!-- mark -->
Series="{Binding Series}"><!-- mark -->
</lvc:CartesianChart><!-- mark -->
</Window>
And that's it, start your application and you will see the chart in your main window.
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 override the OnStartup
method as follows.
using System.Windows;
using LiveChartsCore;// mark
using LiveChartsCore.SkiaSharpView;// mark
namespace WPFSample
{
public partial class App : Application
{
protected override void OnStartup(StartupEventArgs e)
{
base.OnStartup(e);
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
);
}
}
}