Generate Charts As Image

Notice this web site builds the control from code behind but you could also grab it from the toolbox, this sample also uses a ViewModel to populate the properties of the control(s) in this sample.

View model

using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore;
using LiveChartsCore.Geo;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Drawing.Geometries;

namespace ViewModelsSamples.General.ChartToImage;

[ObservableObject]
public partial class ViewModel
{
    public ISeries[] CatesianSeries { get; set; } =
    {
        new LineSeries<int> { Values = new int[] { 1, 5, 4, 6 } },
        new ColumnSeries<int> { Values = new int[] { 4, 8, 2, 4 } }
    };

    public ISeries[] PieSeries { get; set; } =
    {
        new PieSeries<int> { Values = new int[] { 10, } },
        new PieSeries<int> { Values = new int[] { 6 } },
        new PieSeries<int> { Values = new int[] { 4 } }
    };

    public IGeoSeries[] GeoSeries { get; set; } = new HeatLandSeries[]
    {
        new()
        {
            Lands = new HeatLand[]
            {
                new() { Name = "bra", Value = 13 },
                new() { Name = "mex", Value = 10 },
                new() { Name = "usa", Value = 15 },
                new() { Name = "can", Value = 8 },
                new() { Name = "ind", Value = 12 },
                new() { Name = "deu", Value = 13 },
                new() { Name= "jpn", Value = 15 },
                new() { Name = "chn", Value = 14 },
                new() { Name = "rus", Value = 11 },
                new() { Name = "fra", Value = 8 },
                new() { Name = "esp", Value = 7 },
                new() { Name = "kor", Value = 10 },
                new() { Name = "zaf", Value = 12 },
                new() { Name = "are", Value = 13 }
            }
        }
    };
}

Form code behind

Having the previous data (ViewModel), we add 3 charts to the UI, a CartesianChart, a PieChart and a GeoMap.

using System.Windows.Forms;
using LiveChartsCore.SkiaSharpView.SKCharts;
using LiveChartsCore.SkiaSharpView.WinForms;
using ViewModelsSamples.General.ChartToImage;

namespace WinFormsSample.General.ChartToImage;

public partial class View : UserControl
{
    private readonly CartesianChart _cartesian;
    private readonly PieChart _pie;
    private readonly GeoMap _map;

    public View()
    {
        InitializeComponent();
        Size = new System.Drawing.Size(90, 90);

        var viewModel = new ViewModel();

        // Adding a cartesian chart to the UI...
        _cartesian = new CartesianChart
        {
            Series = viewModel.CatesianSeries,

            // out of livecharts properties...
            Location = new System.Drawing.Point(0, 0),
            Size = new System.Drawing.Size(400, 200)
        };
        Controls.Add(_cartesian);

        // Adding a pie chart to the UI...
        _pie = new PieChart
        {
            Series = viewModel.PieSeries,

            // out of livecharts properties...
            Location = new System.Drawing.Point(0, 200),
            Size = new System.Drawing.Size(400, 200)
        };
        Controls.Add(_pie);

        // Adding a map chart to the UI...
        _map = new GeoMap
        {
            Series = viewModel.GeoSeries,

            // out of livecharts properties...
            Location = new System.Drawing.Point(0, 400),
            Size = new System.Drawing.Size(400, 200)
        };
        Controls.Add(_map);

        // now lets create the images // mark
        CreateImageFromCartesianControl(); // mark
        CreateImageFromPieControl(); // mark
        CreateImageFromGeoControl(); // mark
    }

    private void CreateImageFromCartesianControl()
    {
        // you can take any chart in the UI, and build an image from it // mark
        var chartControl = _cartesian;
        var skChart = new SKCartesianChart(chartControl) { Width = 900, Height = 600, };
        skChart.SaveImage("CartesianImageFromControl.png");
    }

    private void CreateImageFromPieControl()
    {
        var chartControl = _pie;
        var skChart = new SKPieChart(chartControl) { Width = 900, Height = 600, };
        skChart.SaveImage("PieImageFromControl.png");
    }

    private void CreateImageFromGeoControl()
    {
        var chartControl = _map;
        var skChart = new SKGeoMap(chartControl) { Width = 900, Height = 600, };
        skChart.SaveImage("MapImageFromControl.png");
    }
}

You will get the following plot in the UI.

sample image

Build an image in the server side or console app

LiveCharts can render images without the need of any UI framework, you can build images in the server side or in a console application as far as you install the SkiaSharp view package, it is available from NuGet:

LiveChartsCore.SkiaSharpView

Notice any view of LiveCharts (WPF, WinForms, Maui, etc..) has a dependency on LiveChartsCore.SkiaSharpView package, thus you do not need to install this package again if you are already using LiveCharts to render any control in the UI.

The next code block build a CartesianChart, a PieChart and a GeoMap chart as images, to reproduce this sample create a new ConsoleApplication in VisualStudio 2022, select .Net 6.0 as the framework.

The Net 6.0 template is much cleaner than previous console app templates, notice also that LiveCharts is available in .NET 5.0, .NET core 3.1 or .NET framework (classic) 4.6.2 or greater.

image

Finally build the images in the Program.cs file.

using LiveChartsCore;
using LiveChartsCore.Geo;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Drawing.Geometries;
using LiveChartsCore.SkiaSharpView.SKCharts;

var cartesianChart = new SKCartesianChart
{
    Width = 900,
    Height = 600,
    Series = new ISeries[]
    {
        new LineSeries<int> { Values = new int[] { 1, 5, 4, 6 } },
        new ColumnSeries<int> { Values = new int[] { 4, 8, 2, 4 } }
    }
};

// you can save the image to png (by default)
// or use the second argument to specify another format.
cartesianChart.SaveImage("cartesianChart.png");

var pieChart = new SKPieChart
{
    Width = 900,
    Height = 600,
    Series = new ISeries[]
    {
        new PieSeries<int> { Values = new int[] { 10, } },
        new PieSeries<int> { Values = new int[] { 6 } },
        new PieSeries<int> { Values = new int[] { 4 } }
    }
};

pieChart.SaveImage("pieChart.png");

var geoHeatMap = new SKGeoMap
{
    Width = 900,
    Height = 600,
    Series = new IGeoSeries[]
    {
        new HeatLandSeries
        {
            Lands = new HeatLand[]
            {
                new() { Name = "mex", Value = 10 },
                new() { Name = "usa", Value = 15 },
                new() { Name = "can", Value = 8 }
            }
        }
    }
};

geoHeatMap.SaveImage("geoHeatMap.png");

// alternatively you can get the image and do different operations:
using var image = cartesianChart.GetImage();
using var data = image.Encode();
var base64CartesianChart = Convert.ToBase64String(data.AsSpan());

Console.WriteLine("Images saved at the root folder!");

Notice that the previous code also works in an ASP.net project, as far as you are using .NET core 3.1 or greater