Custom Legends

There are 2 ways to customize tooltips, styling and templating.

Styling a legend

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

Templating a legend

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();
}

You can find another example at the source code of the DefaultLegend class (view, code).

custom tooltip