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.

        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;

The code above would result in the following legend:


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


		Use LegendTemplate property to pass your own template.

		returns a css style that sets the width and height css properties
		based on the series properties.

		returns the series as miniature shapes for the MotionCanvas class.

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

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

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


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

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

custom tooltip