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

		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;


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


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.

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

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


@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