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.

<lvc:CartesianChart
    Series="{Binding Series}"
    LegendPosition="Top"><!-- mark -->
</lvc:CartesianChart>
<lvc:CartesianChart
    Series="{Binding Series}"
    LegendPosition="Bottom"><!-- mark -->
</lvc:CartesianChart>
<lvc:CartesianChart
    Series="{Binding Series}"
    LegendPosition="Left"><!-- mark -->
</lvc:CartesianChart>
<lvc:CartesianChart
    Series="{Binding Series}"
    LegendPosition="Right"><!-- mark -->
</lvc:CartesianChart>
<lvc:CartesianChart
    Series="{Binding Series}"
    LegendPosition="Hidden"><!-- mark -->
</lvc:CartesianChart>

Customize default legends

You can use the chart LegendPosition, LegendTextPaint, LegendBackgroundPaint and LegendTextSize to define the legend look (full example here).

Tooltip control from scratch

You can also create your own legend, the recommended way is to use the LiveCharts API (example below) but you can use anything as tooltip as soon as it implements the IChartLegend<T> interface. At the following example we build a custom control to render legends in our charts using the LiveCharts API.

CustomLegend.cs

using System.Linq;
using LiveChartsCore;
using LiveChartsCore.Drawing;
using LiveChartsCore.Drawing.Layouts;
using LiveChartsCore.SkiaSharpView.Drawing;
using LiveChartsCore.SkiaSharpView.Drawing.Layouts;
using LiveChartsCore.SkiaSharpView.SKCharts;

namespace ViewModelsSamples.General.TemplatedLegends;

public class CustomLegend : SKDefaultLegend
{
    protected override Layout<SkiaSharpDrawingContext> GetLayout(Chart chart)
    {
        var theme = chart.GetTheme();

        var stackLayout = new StackLayout
        {
            Orientation = ContainerOrientation.Vertical,
            Padding = new Padding(15, 4),
            HorizontalAlignment = Align.Start,
            VerticalAlignment = Align.Middle,
        };

        foreach (var series in chart.Series.Where(x => x.IsVisibleAtLegend))
            stackLayout.Children.Add(new LegendItem(series, theme.TooltipTextPaint));

        return stackLayout;
    }
}

View

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="MauiSample.General.TemplatedLegends.View"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:core="clr-namespace:LiveChartsCore;assembly=LiveChartsCore"
    xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Maui;assembly=LiveChartsCore.SkiaSharpView.Maui"
    xmlns:vms="clr-namespace:ViewModelsSamples.General.TemplatedLegends;assembly=ViewModelsSamples"
    x:DataType="vms:ViewModel">

    <ContentPage.BindingContext>
        <vms:ViewModel/>
    </ContentPage.BindingContext>

    <lvc:CartesianChart LegendPosition="Right">
        <!-- mark -untilCloses CartesianChart.Legend -->
        <lvc:CartesianChart.Legend>
            <vms:CustomLegend></vms:CustomLegend>
        </lvc:CartesianChart.Legend>

        <lvc:CartesianChart.Series>
            <lvc:SeriesCollection>
                <lvc:XamlColumnSeries
                    SeriesName="Roger" Values="{Binding RogerValues}"/>
                <lvc:XamlColumnSeries
                    SeriesName="Susan" Values="{Binding SusanValues}" />
            </lvc:SeriesCollection>
        </lvc:CartesianChart.Series>
    </lvc:CartesianChart>
</ContentPage>