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 xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinSample.Axes.NamedLabels.View"
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Xamarin.Forms;assembly=LiveChartsCore.SkiaSharpView.XamarinForms"
             xmlns:vms="clr-namespace:ViewModelsSamples.Axes.NamedLabels;assembly=ViewModelsSamples">
    <ContentPage.BindingContext>
        <vms:ViewModel/>
    </ContentPage.BindingContext>
    <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>

image

Templating tooltips

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinSample.General.TemplatedTooltips.View"
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Xamarin.Forms;assembly=LiveChartsCore.SkiaSharpView.XamarinForms"
             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>
    
    <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>

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

custom tooltip