Installation and first chart

Install from NuGet

You can [get LiveCharts from NuGet](https://www.nuget.org/packages/LiveChartsCore.SkiaSharpView.{{ platform_display_name }}). If you need more help to install a package from NuGet, please follow this guide.

{{ $"LiveChartsCore.SkiaSharpView.{platform_display_name}@{version}" | from_nuget }}

{{~ if winforms || wpf }} :::tip By default wpf and winforms projects target netx.0-windows but SkiaSharp 3 does not provide a build for that target, so NuGet will restore SkiaSharp dependencies using the .Net framework version. While that should not affect your app, you should consider to update the TargetFramework of your app and specify the min windows version, for example netx.0-windows10.0.19041, for more info see: https://github.com/Live-Charts/LiveCharts2/issues/1772. ::: {{ end ~}}

{{~ if 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 edit the chart properties. {{~ end ~}}

{{~ if maui ~}} Register LiveCharts and SkiaSharp in your MauiProgram.cs file.

{{~ render "~/../samples/MauiSample/MauiProgram.cs" ~}}

{{~ end ~}}

First chart

The following example renders a basic chart in the UI.

{{~ render $"~/../samples/{platform_samples_folder}/General/FirstChart{view_extension}" ~}}

:::info 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. :::

{{~ if xaml ~}}

XAML and hot-reload

LiveCharts provides XAML-friendly counterparts to its core charting types. For example, the LineSeries<T> class has a matching XamlLineSeries type. All XAML types in the library use the Xaml prefix to clearly distinguish them from the non-visual LiveCharts objects.

These Xaml types are part of the UI framework — they live in the visual tree and behave like any other UI element. Because they're part of the visual layer, they support data bindings, styles, and other XAML features you'd expect when building user interfaces.

This means you can use hot-reload and designer previews to build charts interactively:

{{~if !avalonia }} :::tip XAML designer support is limited due SkiaSharp restriction to run in the designer, but hot-reload is fully supported. ::: {{ end ~}}

This design allows developers to cleanly separate UI from business logic. In the following two examples, both approaches produce the same chart, but the first is cleaner: the ViewModel doesn’t depend on LiveCharts or SkiaSharp — it just exposes plain data.

Example 1

<lvc:CartesianChart Grid.Row="2" SeriesSource="{Binding Data}">
    <lvc:CartesianChart.SeriesTemplate>
        <DataTemplate>
            <lvc:XamlColumnSeries
                SeriesName="{Binding Name}"
                Values="{Binding Values}"
                Fill="{Binding Color, Converter={StringToColorExampleConverter}}"/>
        </DataTemplate>
    </lvc:CartesianChart.SeriesTemplate>
</lvc:CartesianChart>

public partial class ViewModel
{
    public ChartData[] Data { get; set; } = [
        new("Juana",     [ 2, 5, 4 ], "#f00"),
        new("La cubana", [ 5, 4, 1 ], "#00f")
    ];
}

public class ChartData(string name, int[] points, string color)
{
    public string Name { get; set; } = name;
    public int[] Values { get; set; } = points;
    public string Color { get; set; } = color;
}

Example 2

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

using SkiaSharp;
using LiveChartsCore.Defaults;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting;

public partial class ViewModel
{
    public ISeries[] SeriesCollection { get; set; } = [
        new ColumnSeries<ObservableValue>
        {
            Name = "Juana",
            Values =[ new(2), new(5), new(4) ],
            Fill = new SolidColorPaint(new SKColor(255, 0, 0))
        },
        new ColumnSeries<ObservableValue>
        {
            Name = "la cubana",
            Values =[ new(5), new(4), new(1) ],
            Fill = new SolidColorPaint(new SKColor(0, 0, 255))
        }
    ];
}

{{~ end ~}}

Configure themes, fonts, RTL or mappers (Optional)

Optionally you can configure LiveCharts to add a theme, register a global font, add a mapper for a type or enable right to left tooltips and legends, lets create a new class and name it CustomLiveChartsExtensions, in this class define the AddLiveChartsAppSettings method extension to configure LiveCharts, all the next configuration is optional and overrides the default pre-defined settings in the library.

{{ render "~/../samples/ViewModelsSamples/LiveChartsAppSettings.cs" }}

{{~ if avalonia ~}} Now go to the Solution Explorer and browse for App.axaml.cs file, then edit it as follows:

{{ render "~/../samples/AvaloniaSample/App.axaml.cs" }}

{{~ end ~}}

{{~ if wpf ~}} Now go to the Solution Explorer and browse for App.xaml.cs file, then override the OnStartup method as follows:

{{ render "~/../samples/WPFSample/App.xaml.cs" }}

{{~ end ~}}

{{~ if winforms ~}} Now go to the Solution Explorer and browse for Program.cs file, then edit it as follows:

{{ render "~/../samples/WinFormsSample/Program.cs" }}

{{~ end ~}}

{{~ if uno ~}} Now go to the Solution Explorer and browse for UnoApp.Shared/App.xaml.cs file, then edit it as follows:

{{ render "~/../samples/UnoPlatformSample/UnoPlatformSample/App.xaml.cs" }}

{{~ end ~}}

{{~ if winui ~}} Now go to the Solution Explorer and browse for App.xaml.cs file, then edit it as follows:

{{ render "~/../samples/WinUISample/WinUISample/App.xaml.cs" }}

{{~ end ~}}

{{~ if blazor ~}}

Now go to the solution explorer, browse for the App.razor file, then edit it as follows:

{{ render "~/../samples/BlazorSample/App.razor" }}

{{~ end ~}}

{{~ if maui ~}} Now go to the Solution Explorer and browse for MauiProgram.cs file, then find UseLiveCharts() method and chain the AddLiveChartsAppSettings() method at our LiveCharts configuration section:

.UseLiveCharts(config => config
    .AddLiveChartsAppSettings())

{{~ end ~}}

Enable hardware acceleration

LiveCharts supports hardware accelerated views via SkiaSharp, by default the library is not hardware accelerated, this is because as today the GPU views by SkiaSharp are not as stable as the CPU views.

:::tip On Avalonia or Uno with the SkiaRenderer enabled, the LiveCharts settings for GPU/CPU control or VSync are ignored, since this is handled by Avalonia/Uno, LiveCharts just draws as the UI framework wants. It is normally already using hardware acceleration, but completely handled by the UI framework. :::

GPU improves the time it takes to render a frame, which results in smoother and more efficient animations, but as today, there are some known issues when using the SkiaSharp hardware accelerated views (specially when disposing/re-creating the controls), you can turn on hardware acceleration, the recommendation is to update SkiaSharp to the latest available version, then test if it works correctly for your case.

If you face an issue with the hardware accelerated views, ensure to identify if the issue belongs to SkiaSharp or LiveCharts; If the issue occurs on both CPU and GPU render modes, then the issue is most likely a LiveCharts issue, if it only happens when GPU is on, then it is most likely an issue with the hardware accelerated views of SkiaSharp.

{{ render "~/../samples/ViewModelsSamples/LiveChartsRenderSettings.cs" }}

Finally chain the render settings we just created at our LiveCharts configuration section:

{{~ if maui ~}}

// ...
.UseLiveCharts(config => config
    .AddLiveChartsAppSettings()
    .AddLiveChartsRenderSettings())

{{~ else ~}}

LiveCharts.Configure(c => c
    .AddLiveChartsAppSettings()
    .AddLiveChartsRenderSettings());

{{~ end ~}}

Advanced rendering

SkiaSharp makes it easy to take the library to Android, iOS, Windows, MacOS, Tizen, Linux and the Web, but on advanced scenarios you can build your own backend, for example in the next example we use DirectX11 via Vortice.Windows to render our chart. This gives us full control over the rendering pipeline, this has some benefits such as:

• Improved performance.
• Potentially smaller exe files since we no longer need the Skia natives.
• Potentially better AOT builds.

You can find the Vortice sample at the GitHub repo, it does not support all the features in the library, this example is just to demonstrate that LiveCharts dependency on SkiaSharp is optional; We can connect the library to any drawing engine.