Legends

A legend is a visual element that displays a list with the name, stroke and fills of the series in a chart:

You can place a legend at Top, Bottom, Left, Right or Hidden positions, notice the Hidden position will disable legends in a chart, default value is Hidden.

cartesianChart1.TooltipPosition = LiveChartsCore.Measure.LegendPosition.Bottom; // mark
// or use Top, Left, Right or Hidden

Styling legends

A chart exposes many properties to quickly style a legend:

cartesianChart1.LegendPosition = LiveChartsCore.Measure.LegendPosition.Left;
cartesianChart1.LegendFont = new System.Drawing.Font("Courier New", 25);
cartesianChart1.LegendTextColor = System.Drawing.Color.FromArgb(255, 50, 50, 50);
cartesianChart1.LegendBackColor = System.Drawing.Color.FromArgb(255, 250, 250, 250);

The code above would result in the following legend:

Custom template

You can create your own legend control, the key is that your control must implement IChartLegend<SkiaSharpDrawingContext> and then you have to create a new instance of that control when your chart initializes.

Add a new form to your app named CustomLegend, then change the code behind as follows:

using System.Collections.Generic;
using System.Drawing;
using System.Windows.Forms;
using LiveChartsCore;
using LiveChartsCore.Kernel.Sketches;
using LiveChartsCore.Measure;
using LiveChartsCore.SkiaSharpView.Drawing;
using LiveChartsCore.SkiaSharpView.WinForms;

namespace WinFormsSample.General.TemplatedLegends;

public partial class CustomLegend : UserControl, IChartLegend<SkiaSharpDrawingContext>
{
    public CustomLegend()
    {
        InitializeComponent();
    }

    public LegendOrientation Orientation { get; set; }

    public void Draw(Chart<SkiaSharpDrawingContext> chart)
    {
        var wfChart = (Chart)chart.View;

        var series = chart.ChartSeries;
        var legendOrientation = chart.LegendOrientation;

        Visible = true;
        if (legendOrientation == LegendOrientation.Auto) Orientation = LegendOrientation.Vertical;
        Dock = DockStyle.Right;

        DrawAndMesure(series, wfChart);

        BackColor = wfChart.LegendBackColor;
    }

    private void DrawAndMesure(IEnumerable<IChartSeries<SkiaSharpDrawingContext>> series, Chart chart)
    {
        SuspendLayout();
        Controls.Clear();

        var h = 0f;
        var w = 0f;

        var parent = new Panel();
        parent.BackColor = Color.FromArgb(255, 245, 245, 220);
        Controls.Add(parent);
        using var g = CreateGraphics();
        foreach (var s in series)
        {
            var size = g.MeasureString(s.Name, chart.LegendFont);

            var p = new Panel();
            p.Location = new Point(0, (int)h);
            parent.Controls.Add(p);

            p.Controls.Add(new MotionCanvas
            {
                Location = new Point(6, 0),
                PaintTasks = s.CanvasSchedule.PaintSchedules,
                Width = (int)s.CanvasSchedule.Width,
                Height = (int)s.CanvasSchedule.Height
            });
            p.Controls.Add(new Label
            {
                Text = s.Name,
                ForeColor = Color.Black,
                Font = chart.LegendFont,
                Location = new Point(6 + (int)s.CanvasSchedule.Width + 6, 0)
            });

            var thisW = size.Width + 36 + (int)s.CanvasSchedule.Width;
            p.Width = (int)thisW + 6;
            p.Height = (int)size.Height + 6;
            h += size.Height + 6;
            w = thisW > w ? thisW : w;
        }
        h += 6;
        parent.Height = (int)h;

        Width = (int)w;
        parent.Location = new Point(0, (int)(Height / 2 - h / 2));

        ResumeLayout();
    }
}

Your legend is ready to be used, now when you create a chart, we have to pass a new instance of the tooltip we just created.

var cartesianChart = new CartesianChart(legend: new CustomLegend())
{
    Series = viewModel.Series
};