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 Windows Forms Application template.
Name the project and the solution WinFormsSample, select .NET 8.0 as the target framework.
LiveCharts is also compatible with older versions of .NET even with 4.6.2.
Install from NuGet
Now install LiveCharts from NuGet. If you need more help to install a package from NuGet, please follow this guide.
Install-Package LiveChartsCore.SkiaSharpView.WinForms
After the package is installed you should see the LiveCharts controls in your toolbox, drag a new CartesianChart
control from your toolbox to the
Form1
class.
If the control does not appear in your toolbox, try to rebuild your project and look for it again.
Now go to the code behind of the Form1
class and set the Series
property as follows:
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
namespace WinFormsSample
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
cartesianChart1.Series = new ISeries[] // mark
{ // mark
new LineSeries<double> // mark
{ // mark
Values = new double[] { 2, 1, 3, 5, 3, 4, 6 }, // mark
Fill = null // mark
} // mark
}; // mark
}
}
}
And that's it, start your application and you will see the chart in your main window.
Notice that all the samples in this web site use an Model-View-* pattern, it helps us to build the samples for all the platforms faster, you will find through the docs of this site, that we map the series property of the view model class to the control in the UI.
If the chart is not showing, it is most likely that the layout where you placed the chart is hiding the control. LiveCharts controls do not have any size constraints, a quick fix is to explicitly set the size of the control (Width and Height), these related issues might help you #1483, #1581.
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 Program.cs
file, then edit the it as follows.
using System;
using System.Windows.Forms;
using LiveChartsCore; // mark
using LiveChartsCore.SkiaSharpView; // mark
using SkiaSharp; // mark
namespace WinFormsSample;
static class Program
{
/// <summary>
/// The main entry point for the application.
/// </summary>
[STAThread]
static void Main()
{
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/winforms/2.0.0-rc4/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
_ = Application.SetHighDpiMode(HighDpiMode.SystemAware);
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
Application.Run(new Form1());
}
public record City(string Name, double Population);
}