Display Data Charts in WPF with LiveCharts2

Recently took over a small project that required a data display dashboard, capable of showing curves and input/output volumes. The key requirement was to make it look good. Well, I don't really know what "looks good" means, so I just went with something random.

All data is fake, just to create a visual effect. To display these data charts, I used LiveCharts2. It's a very beautiful charting module. The official website is:

• https://www.lvcharts.com/

LiveCharts2 supports many platforms; here we choose WPF.

If we search directly via NuGet, we find that the LiveCharts version found is quite old.

LiveCharts2 has made many improvements and fixes over the V0 version. Install LiveChartsCore.SkiaSharpView.WPF via NuGet.

Alternatively, open the Package Manager Console and enter:

Install-Package LiveChartsCore.SkiaSharpView.WPF -Version 2.0.0-rc2

Wait for the installation to finish, then you can find it.

Also install CommunityToolkit.Mvvm. This can be found via NuGet. This package is here because GalaSoft.MVVMLight is no longer maintained, so the official team created this new model for smooth migration.

Create a new MainViewModel, add references, and add the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using CommunityToolkit.Mvvm.ComponentModel;

namespace LiveChartsDemo
{
    [ObservableObject]
    public partial class MainViewModel
    {
        public ISeries[] Series { get; set; }
            = new ISeries[]
            {
                new LineSeries<double>
                {
                    Values = new double[] { 2, 1, 3, 5, 3, 4, 6 },
                    Fill = null
                }
            };
    }
}

Then in MainWindow.xaml, reference LiveCharts and set the DataContext.

xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"

<Window.DataContext>
	<local:MainViewModel />
</Window.DataContext>

Then add a CartesianChart:

<Grid>
	<lvc:CartesianChart Series="{Binding Series}" />
</Grid>

LineSeries is the line chart type. Of course, you can also have a bar chart.

public ISeries[] Series { get; set; }
            = new ISeries[]
            {
                new ColumnSeries<double>
                {
                    Values = new double[] { 2, 1, 3, 5, 3, 4, 6 },
                },
                new LineSeries<double>
                {
                    Values = new double[] { 2, 1, 3, 5, 3, 4, 6 },
                    Fill = null
                },
            };

You can also add a Title to describe the chart's purpose.

public LabelVisual Title { get; set; }
            = new LabelVisual
            {
                Text = "Title",
                TextSize=20,
                Paint = new SolidColorPaint(SKColors.Black)
            };

<lvc:CartesianChart Series="{Binding Series}" Title="{Binding Title}"/>

There’s a problem: if you set the Title to Chinese,

public LabelVisual Title { get; set; }
            = new LabelVisual
            {
                Text = "标题",
                TextSize=20,
                Paint = new SolidColorPaint(SKColors.Black)
            };

it won't display.

We need to adjust the settings to support Chinese display.

public LabelVisual Title { get; set; }
            = new LabelVisual
            {
                Text = "标题",
                TextSize=20,
                Paint = new SolidColorPaint {
                    Color = SKColors.Black,
                    SKTypeface = SKFontManager.Default.MatchCharacter('汉')
                },
            };

The official documentation is very rich and includes corresponding examples. The results are quite impressive.

• gallery - LiveCharts2

Sample Effect 1:

Sample Effect 2:

Sample Effect 3:

Sample Effect 4:

Sample Effect 5:

Sample Effect 6:

It is said that the free LiveCharts performs poorly when the data volume exceeds 10,000, requiring the paid version. I haven't verified this yet; readers can try it out themselves.