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.

<UserControl x:Class="WPFSample.Axes.NamedLabels.View"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
             xmlns:vms="clr-namespace:ViewModelsSamples.Axes.NamedLabels;assembly=ViewModelsSamples">
    <UserControl.DataContext>
        <vms:ViewModel/>
    </UserControl.DataContext>
    <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>
</UserControl>

image

Templating tooltips

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

<UserControl x:Class="WPFSample.General.TemplatedTooltips.View"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
             xmlns:vms="clr-namespace:ViewModelsSamples.General.TemplatedTooltips;assembly=ViewModelsSamples"
             xmlns:ctx="clr-namespace:LiveChartsCore.Kernel;assembly=LiveChartsCore">
    <UserControl.DataContext>
        <vms:ViewModel/>
    </UserControl.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <lvc:CartesianChart Grid.Row="0" Series="{Binding Series}" TooltipPosition="Top" >
            <!-- mark -untilCloses CartesianChart.TooltipTemplate -->
            <lvc:CartesianChart.TooltipTemplate>
                <DataTemplate>
                    <Border Background="#303030">
                        <ItemsControl ItemsSource="{Binding Points, RelativeSource={RelativeSource AncestorType=lvc:DefaultTooltip}}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Vertical" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate DataType="{x:Type ctx:ChartPoint}">
                                    <Border Padding="7 5">
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding AsTooltipString}" Margin="0 0 8 0" Foreground="AntiqueWhite" />
                                            <lvc:MotionCanvas Margin="0 0 8 0" 
                                                PaintTasks="{Binding Context.Series.CanvasSchedule.PaintSchedules}"
                                                Width="{Binding Context.Series.CanvasSchedule.Width}"
                                                Height="{Binding Context.Series.CanvasSchedule.Height}"
                                                VerticalAlignment="Center"/>
                                        </StackPanel>
                                    </Border>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </Border>
                </DataTemplate>
            </lvc:CartesianChart.TooltipTemplate>
        </lvc:CartesianChart>
    </Grid>
</UserControl>

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

custom tooltip