LiveCharts2 for Godot

As official web-site says, LiveCharts2 is a data visualization library for .Net that can run across multiple devices and frameworks, It runs under the MIT license (free) and offers a paid package to improve performance and extend features.

LiveCharts2 web-site: https://livecharts.dev LiveCharts2 source code: https://github.com/beto-rodriguez/LiveCharts2

Prerequisites

Because this library is for the .Net platform, you need to make sure that you have created a C# solution as part of your Godot project.

Installation

1. At this moment to install this library to your project as a plugin, you need download a build of this library for the desired version of .Net (6, 7 or 8) from builds directory and copy the live-charts plugin folder to the addons folder.

2. Install the following NuGet packages:

• SkiaSharp.HarfBuzz

• SkiaSharp.Views.Desktop.Common

• or simply add the following package references to your *.csproj file:

<ItemGroup>
    <PackageReference Include="SkiaSharp.HarfBuzz" Version="2.88.6" />
    <PackageReference Include="SkiaSharp.Views.Desktop.Common" Version="2.88.6" />
</ItemGroup>

3. Add the following references to DLL's to your *.csproj file (it is needed because SkiaSharp.Views.Godot and LiveChartsCore.SkiaSharpView.Godot are not official yet):

<ItemGroup>
    <Reference Include="LiveChartsCore">
        <HintPath>addons\live_charts\libraries\LiveChartsCore.dll</HintPath>
    </Reference>
    <Reference Include="LiveChartsCore.SkiaSharpView">
        <HintPath>addons\live_charts\libraries\LiveChartsCore.SkiaSharpView.dll</HintPath>
    </Reference>
    <Reference Include="LiveChartsCore.SkiaSharpView.Godot">
        <HintPath>addons\live_charts\libraries\LiveChartsCore.SkiaSharpView.Godot.dll</HintPath>
    </Reference>
    <Reference Include="SkiaSharp.Views.Godot">
        <HintPath>addons\live_charts\libraries\SkiaSharp.Views.Godot.dll</HintPath>
    </Reference>
</ItemGroup>

4. Finally, your *.csproj file should look like this:

<Project Sdk="Godot.NET.Sdk/4.2.0">
  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <TargetFramework Condition=" '$(GodotTargetPlatform)' == 'android' ">net8.0</TargetFramework>
    <TargetFramework Condition=" '$(GodotTargetPlatform)' == 'ios' ">net8.0</TargetFramework>
    <EnableDynamicLoading>true</EnableDynamicLoading>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" />
    <PackageReference Include="SkiaSharp" Version="2.88.6" />
    <PackageReference Include="SkiaSharp.HarfBuzz" Version="2.88.6" />
    <PackageReference Include="SkiaSharp.Views.Desktop.Common" Version="2.88.6" />
  </ItemGroup>
  <ItemGroup>
    <Reference Include="LiveChartsCore">
      <HintPath>addons\live_charts\libraries\LiveChartsCore.dll</HintPath>
    </Reference>
    <Reference Include="LiveChartsCore.SkiaSharpView">
      <HintPath>..\New Game Project\addons\live_charts\libraries\LiveChartsCore.SkiaSharpView.dll</HintPath>
    </Reference>
    <Reference Include="LiveChartsCore.SkiaSharpView.Godot">
      <HintPath>addons\live_charts\libraries\LiveChartsCore.SkiaSharpView.Godot.dll</HintPath>
    </Reference>
    <Reference Include="SkiaSharp.Views.Godot">
      <HintPath>addons\live_charts\libraries\SkiaSharp.Views.Godot.dll</HintPath>
    </Reference>
  </ItemGroup>
</Project>

5. Rebuild your project and enable live-charts plugin.

Usage

1. Create a View Model:

using System.Collections.Generic;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;

namespace NewGameProject;

public class ViewModel
{
    // Create the collection of series to use in chart
    public IEnumerable<ISeries> Series { get; } = new ISeries[]
    {
        new LineSeries<double>
        {
            Values = new double[] { 2, 1, 3, 5, 3, 4, 6 },
            Fill = null
        }
    };
}

2. Create a new User Interface scene:

3. Add a CartesianChart to the scene:

4. Attach the new script to the newly created scene with the following code:

using Godot;
using GodotPlugins.LiveCharts;
using LiveChartsCore.Measure;

namespace NewGameProject;

public partial class Sample : Control
{
    public override void _Ready()
    {
        // Instantiate the view model for the chart
        var viewModel = new ViewModel();

        // Get the chart node
        var cartesianChart = (CartesianChart)FindChild("CartesianChart");

        // Set the chart series from the view model property
        cartesianChart.Series = viewModel.Series;
        
        // Optionally, set chart's legend position
        cartesianChart.LegendPosition = LegendPosition.Right;
    }
}

5. Run the scene:

More samples

You can see all official LiveCharts2 samples adapted to Godot in action in the samples/Samples folder. Just run MainScene.

Some technical details

LiveCharts2 is designed as a UI-framework independent library. To accomplish this, it uses the feature-rich SkiaSharp library (which is C# bindings for the Google's Skia 2D graphics library) as a rendering engine. So, it can be quite easily ported to .Net frameworks/platforms where it is possible to use SkiaSharp. To use SkiaSharp, there are separate so-called views for different frameworks Just like SkiaSharp, LiveCharts2 provides different views for different frameworks.

There was no such SkiaSharp view for Godot, so I created it: SkiaSharp.Views.Godot. After that, I created LiveCharts2 view to Godot: LiveChartsCore.SkiaSharpView.Godot based on SkiaSharp view for Godot.

Also, there is a technical issue in the current implementation that may require improvement: LiveCharts' types require to invoke a given action in the UI thread. At this moment, this is done by using DeferringHelper class. Please create a discussion, if you know how to do it better.