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>

Styling legends

A chart exposes many properties to quickly style a legend:

<lvc:CartesianChart
    Series="{Binding Series}"
    LegendPosition="Left"
    LegendFontFamily="Courier New"
    LegendFontSize="25"
    LegendTextBrush="#f2f4c3"
    LegendBackground="#480032">
</lvc:CartesianChart>

The code above would result in the following legend:

Custom template

If you need to customize more, you can also use the create your own template:

<?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"
             >
    
    <ContentPage.BindingContext>
        <vms:ViewModel/>
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <lvc:PaintTasksValueConverter x:Key="paintTaskConverter" />
        <lvc:WidthConverter x:Key="wConverter" />
        <lvc:HeightConverter x:Key="hConverter" />
    </ContentPage.Resources>

    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <lvc:CartesianChart Grid.Row="0" Series="{Binding Series}" LegendPosition="Bottom">
                <!-- mark -untilCloses CartesianChart.LegendTemplate -->
                <lvc:CartesianChart.LegendTemplate>
                    <DataTemplate>
                        <Frame Background="#F5F5DC" CornerRadius="4" Padding="6">
                            <StackLayout 
                                BindableLayout.ItemsSource="{Binding Series, Source={RelativeSource AncestorType={x:Type lvc:LegendBindingContext}}}"
                                Orientation="{Binding Orientation, Source={RelativeSource AncestorType={x:Type lvc:LegendBindingContext}}}"
                                VerticalOptions="Center">
                                <BindableLayout.ItemTemplate>
                                    <DataTemplate>
                                        <StackLayout Orientation="Horizontal" VerticalOptions="Center">
                                            <Label
                                            Text="{Binding Name}" />
                                            <lvc:MotionCanvas 
                                            VerticalOptions="Center"
                                            Margin="5, 0, 0, 0"
                                            WidthRequest="{Binding Source={RelativeSource AncestorType={x:Type core:ISeries}}, Converter={StaticResource wConverter}}"
                                            HeightRequest="{Binding Source={RelativeSource AncestorType={x:Type core:ISeries}}, Converter={StaticResource hConverter}}"
                                            PaintTasks="{Binding Source={RelativeSource AncestorType={x:Type core:ISeries}}, Converter={StaticResource paintTaskConverter}}"/>
                                        </StackLayout>
                                    </DataTemplate>
                                </BindableLayout.ItemTemplate>
                            </StackLayout>
                        </Frame>
                    </DataTemplate>
                </lvc:CartesianChart.LegendTemplate>
            </lvc:CartesianChart>
        </Grid>
    </ContentPage.Content>
</ContentPage>