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="WinUISample.Axes.NamedLabels.View"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:lvc="using:LiveChartsCore.SkiaSharpView.WinUI"
    xmlns:vms="using:ViewModelsSamples.Axes.NamedLabels"
    mc:Ignorable="d">

    <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>

Templating tooltips

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

<UserControl
    x:Class="WinUISample.General.TemplatedTooltips.View"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:lvc="using:LiveChartsCore.SkiaSharpView.WinUI"
    xmlns:vms="using:ViewModelsSamples.General.TemplatedTooltips"
    mc:Ignorable="d">

    <UserControl.DataContext>
        <vms:ViewModel/>
    </UserControl.DataContext>
    <Grid>
        <lvc:CartesianChart Series="{Binding Series}" TooltipPosition="Top" >
            <!-- mark -untilCloses CartesianChart.TooltipTemplate -->
            <lvc:CartesianChart.TooltipTemplate>
                <DataTemplate>
                    <Border Background="#303030">
                        <ItemsControl ItemsSource="{Binding Points}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        Orientation="Vertical"/>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Border Padding="7 5">
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock
                                                Text="{Binding ChartPoint.AsTooltipString}"
                                                FontFamily="{Binding FontFamily}"
                                                Foreground="AntiqueWhite"
                                                FontSize="{Binding FontSize}"
                                                FontStyle="{Binding FontStyle}"
                                                FontStretch="{Binding FontStretch}"
                                                Margin="0 0 8 0"
                                                VerticalAlignment="Center"/>
                                            <lvc:MotionCanvas
                                                Margin="0 0 8 0" 
                                                PaintTasks="{Binding ChartPoint.Context.Series.CanvasSchedule.PaintSchedules}"
                                                Width="{Binding ChartPoint.Context.Series.CanvasSchedule.Width}"
                                                Height="{Binding ChartPoint.Context.Series.CanvasSchedule.Height}"
                                                VerticalAlignment="Center"/>
                                        </StackPanel>
                                    </Border>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </Border>
                </DataTemplate>
            </lvc:CartesianChart.TooltipTemplate>
        </lvc:CartesianChart>
    </Grid>

</UserControl>