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.

<CartesianChart
    Series="series"
    LegendPosition="LiveChartsCore.Measure.LegendPosition.Top"><!-- mark -->
</CartesianChart>
<CartesianChart
    Series="series"
    LegendPosition="LiveChartsCore.Measure.LegendPosition.Bottom"><!-- mark -->
</CartesianChart>
<CartesianChart
    Series="series"
    LegendPosition="LiveChartsCore.Measure.LegendPosition.Left"><!-- mark -->
</CartesianChart>
<CartesianChart
    Series="series"
    LegendPosition="LiveChartsCore.Measure.LegendPosition.Right"><!-- mark -->
</CartesianChart>
<CartesianChart
    Series="series"
    LegendPosition="LiveChartsCore.Measure.LegendPosition.Hidden"><!-- mark -->
</CartesianChart>

Styling legends

You can use css to override the style of the tooltip.

<style>
    /*
        You can also use css to override the styles.
    */

    .lvc-legend {
        background-color: #fafafa !important;
    }

    .lvc-legend-item {
        font-family: SFMono-Regular,Menlo,Monaco,Consolas !important;
        color: #808080 !important;
    }
</style>

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:

@page "/General/TemplatedLegends"
@using LiveChartsCore.SkiaSharpView.Blazor
@using ViewModelsSamples.General.TemplatedLegends

<CartesianChart
	Series="ViewModel.Series"
	LegendPosition="LiveChartsCore.Measure.LegendPosition.Right">

	<!--
		Use LegendTemplate property to pass your own template.

		GetSeriesMiniatureStyle():
		returns a css style that sets the width and height css properties
		based on the series properties.

		GetSeriesAsMiniaturePaints():
		returns the series as miniature shapes for the MotionCanvas class.
	-->

	<!-- mark -untilCloses LegendTemplate -->
	<LegendTemplate>
		<h5>This is a custom legend</h5>

		@foreach (var series in @context)
		{
			<div class="d-flex">
				<div>
					@series.Name
				</div>

				<div class="lvc-miniature" style="@LiveChartsBlazor.GetSeriesMiniatureStyle(series)">
					<MotionCanvas PaintTasks="@LiveChartsBlazor.GetSeriesAsMiniaturePaints(series)" />
				</div>
			</div>
		}
	</LegendTemplate>

</CartesianChart>

@code {
	public ViewModel ViewModel { get; set; } = new();
}