[C#] LiveChartsCoreで折れ線グラフを表示する（基本からレンジ切替まで）

LiveChartsCore を使ったグラフ表示をアプリケーションに組み込みました。

LiveChartsCore の折れ線グラフ表示例

LiveChartsCore の使い方を簡単な覚え書きとして残します。

LiveChartsCore とは？

LiveChartsCore は、.NET 向けのオープンソースのグラフ描画ライブラリです。

WPF / WinForms / Avalonia / MAUI など複数のUIフレームワークに対応しており、

折れ線グラフ
棒グラフ
円グラフ
ヒートマップ

などを簡単に描画できます。

.NET 標準にも System.Windows.Forms.DataVisualization などのグラフ機能は存在しますが、

API が古い
スタイリングがやや扱いにくい
MVVMとの相性があまり良くない

といった面があります。

その点、LiveChartsCore は

モダンなAPI設計
バインディングベースの構成
アニメーション対応
クロスプラットフォーム

といった特徴があり、現在よく使われているグラフライブラリの一つです。

インストール方法（WPFの場合）

NuGet からインストールします。

Package Manager Console

Install-Package LiveChartsCore.SkiaSharpView.WPF

または

dotnet CLI

dotnet add package LiveChartsCore.SkiaSharpView.WPF

これで LiveChartsCore と SkiaSharp が一緒に導入されます。

XAML では以下の名前空間を追加します。

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

1. まずは最小構成（固定データ）

まずは「とにかく折れ線グラフを表示する」最小構成です。

XAML

<Window x:Class="Keys.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
        Title="LiveCharts Sample" Height="450" Width="800">

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

C# コード（最小構成）

using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using System.Linq;
using System.Windows;

namespace Keys;

public partial class MainWindow : Window
{
    public ISeries[] Series { get; set; }
    public Axis[] XAxes { get; set; }
    public Axis[] YAxes { get; set; }

    public MainWindow()
    {
        InitializeComponent();

        var values = new long[] { 1200, 1350, 1280, 1600, 1420, 1500, 1700 };

        Series =
        [
            new LineSeries<long>
            {
                Values = values,
                GeometrySize = 6
            }
        ];

        XAxes =
        [
            new Axis
            {
                Labels = new[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" }
            }
        ];

        YAxes = [ new Axis() ];

        DataContext = this;
    }
}

ここでのポイント

LiveChartsCore の基本は次の3つです。

Series … 実際のデータ
XAxes … 横軸の設定
YAxes … 縦軸の設定

データは LineSeries<T> に Values として渡します。

2. レンジ切替を追加する

次に、表示範囲を切り替えられるようにしてみます。

UIに ComboBox を追加

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <ComboBox Grid.Row="0"
              Width="150"
              SelectedIndex="0"
              SelectionChanged="RangeCombo_SelectionChanged">
        <ComboBoxItem Content="Last 7 days"/>
        <ComboBoxItem Content="Last 30 days"/>
        <ComboBoxItem Content="Last 90 days"/>
    </ComboBox>

    <lvc:CartesianChart Grid.Row="1"
                        Series="{Binding Series}"
                        XAxes="{Binding XAxes}"
                        YAxes="{Binding YAxes}" />
</Grid>

C# 側を少し拡張

private readonly long[] _allValues =
{
    1000,1100,1050,1200,1300,1250,1400,
    1350,1500,1600,1550,1700,1800,1750
};

private void LoadRange(int days)
{
    var values = _allValues.TakeLast(days).ToArray();

    Series =
    [
        new LineSeries<long>
        {
            Values = values,
            GeometrySize = 6
        }
    ];

    XAxes =
    [
        new Axis
        {
            Labels = Enumerable.Range(1, values.Length)
                               .Select(i => $"Day {i}")
                               .ToArray()
        }
    ];

    YAxes = [ new Axis() ];

    DataContext = null;
    DataContext = this;
}

private void RangeCombo_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
    var days = ((System.Windows.Controls.ComboBox)sender).SelectedIndex switch
    {
        0 => 7,
        1 => 14,
        _ => _allValues.Length
    };

    LoadRange(days);
}

ここで分かること

Series を差し替えればグラフは更新される
バインディング経由でUIに反映される
軸ラベルも動的に変更できる

まとめ

LiveChartsCore では、

データは LineSeries<T> に渡す
軸は Axis で定義する
Series を更新すれば再描画される

という非常にシンプルな構造になっています。

まずは最小構成で動かし、次に動的変更を追加する。

この順番で理解すると、LiveChartsCore はとても扱いやすいライブラリです。