Custom tooltips

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

Styling a tooltip

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="MauiSample.Axes.NamedLabels.View"
             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Maui;assembly=LiveChartsCore.SkiaSharpView.Maui"
             xmlns:vms="clr-namespace:ViewModelsSamples.Axes.NamedLabels;assembly=ViewModelsSamples"
             >
    <ContentPage.BindingContext>
        <vms:ViewModel/>
    </ContentPage.BindingContext>
	<ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            
            <lvc:CartesianChart
                Series="{Binding Series}"
                XAxes="{Binding XAxes}"
                YAxes="{Binding YAxes}"
                TooltipPosition="Left"
                TooltipFontFamily="Courier New"
                TooltipFontSize="25"
                TooltipTextBrush="#f2f4c3"
                TooltipBackground="#480032">
            </lvc:CartesianChart>

        </Grid>
    </ContentPage.Content>
</ContentPage>

Templating tooltips

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="MauiSample.General.TemplatedTooltips.View"
             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Maui;assembly=LiveChartsCore.SkiaSharpView.Maui"
             xmlns:vms="clr-namespace:ViewModelsSamples.General.TemplatedTooltips;assembly=ViewModelsSamples"
             >
    
    <ContentPage.BindingContext>
        <vms:ViewModel/>
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <lvc:PaintTasksValueConverter x:Key="paintTaskConverter" />
        <lvc:WidthConverter x:Key="wConverter" />
        <lvc:HeightConverter x:Key="hConverter" />
    </ContentPage.Resources>

    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            
            <lvc:CartesianChart
                Grid.Row="0"
                Series="{Binding Series}">
                <!-- mark -untilCloses CartesianChart.TooltipTemplate -->
                <lvc:CartesianChart.TooltipTemplate>
                    <DataTemplate>
                        <Frame Background="#353535" CornerRadius="4" HasShadow="True" Padding="6">
                            <StackLayout BindableLayout.ItemsSource="{Binding Points, Source={RelativeSource AncestorType={x:Type lvc:TooltipBindingContext}}}">
                                <BindableLayout.ItemTemplate>
                                    <DataTemplate>
                                        <StackLayout Orientation="Horizontal" VerticalOptions="Center">
                                            <Label Text="{Binding AsTooltipString}"
                                            TextColor="#fafafa"/>
                                            <lvc:MotionCanvas 
                                            VerticalOptions="Center"
                                            Margin="5, 0, 0, 0"
                                            WidthRequest="{Binding Context.Series, Converter={StaticResource wConverter}}"
                                            HeightRequest="{Binding Context.Series, Converter={StaticResource hConverter}}"
                                            PaintTasks="{Binding Context.Series, Converter={StaticResource paintTaskConverter}}"/>
                                        </StackLayout>
                                    </DataTemplate>
                                </BindableLayout.ItemTemplate>
                            </StackLayout>
                        </Frame>
                    </DataTemplate>
                </lvc:CartesianChart.TooltipTemplate>
            </lvc:CartesianChart>
        </Grid>
    </ContentPage.Content>
</ContentPage>