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:

<UserControl
    x:Class="WinUISample.General.TemplatedLegends.View"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:lvc="using:LiveChartsCore.SkiaSharpView.WinUI"
    xmlns:vms="using:ViewModelsSamples.General.TemplatedLegends"
    mc:Ignorable="d">

    <UserControl.DataContext>
        <vms:ViewModel/>
    </UserControl.DataContext>
    <Grid>
        <lvc:CartesianChart Series="{Binding Series}" LegendPosition="Right" >
            <!-- mark -untilCloses CartesianChart.LegendTemplate -->
            <lvc:CartesianChart.LegendTemplate>
                <DataTemplate>
                    <ItemsControl ItemsSource="{Binding SeriesCollection}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel
                                    Background="{Binding Background}"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Orientation="{Binding Orientation}" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border Padding="15 4">
                                    <StackPanel Orientation="Horizontal" Background="#F5F5DC">
                                        <TextBlock
                                            Text="{Binding Series.Name}"
                                            FontFamily="{Binding FontFamily}"
                                            Foreground="{Binding Foreground}"
                                            FontSize="{Binding FontSize}"
                                            FontStyle="{Binding FontStyle}"
                                            FontStretch="{Binding FontStretch}"
                                            VerticalAlignment="Center"/>
                                        <lvc:MotionCanvas
                                            Margin="0 0 8 0"
                                            PaintTasks="{Binding Series.CanvasSchedule.PaintSchedules}"
                                            Width="{Binding Series.CanvasSchedule.Width}"
                                            Height="{Binding Series.CanvasSchedule.Height}"
                                            VerticalAlignment="Center"/>
                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </DataTemplate>
            </lvc:CartesianChart.LegendTemplate>
        </lvc:CartesianChart>
    </Grid>

</UserControl>