Custom tooltips

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

Styling a tooltip

You can use css to specify the background color, text color, font, size or position using the chart properties.

@page "/Axes/NamedLabels"
@using LiveChartsCore.SkiaSharpView.Blazor
@using ViewModelsSamples.Axes.NamedLabels

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

	.lvc-tooltip {
		background-color: #480032 !important;
	}

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

<CartesianChart
	Series="ViewModel.Series"
	XAxes="ViewModel.XAxes"
	YAxes="ViewModel.YAxes">
</CartesianChart>

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

image

Templating tooltips

If you need to customize more, you can also pass your own template:

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

<CartesianChart Series="ViewModel.Series">

	<!--
		Use TooltipTemplate 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 TooltipTemplate -->
	<TooltipTemplate>
		<h5>This is a custom tooltip</h5>

		@foreach (var tooltipPoint in @context)
		{
			<div class="d-flex">
				<div>
					@tooltipPoint.AsTooltipString
				</div>
				<div class="lvc-miniature" style="@LiveChartsBlazor.GetSeriesMiniatureStyle(tooltipPoint.Context.Series)">
					<MotionCanvas PaintTasks="@LiveChartsBlazor.GetSeriesAsMiniaturePaints(tooltipPoint.Context.Series)" />
				</div>
			</div>
		}
	</TooltipTemplate>

</CartesianChart>

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

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

custom tooltip