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="AvaloniaSample.Axes.NamedLabels.View"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Avalonia"
             xmlns:vms="using:ViewModelsSamples.Axes.NamedLabels">
  <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="AvaloniaSample.General.TemplatedTooltips.View"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Avalonia"
             xmlns:vms="using:ViewModelsSamples.General.TemplatedTooltips"
             xmlns:ctx="using:LiveChartsCore.Kernel">
  <UserControl.DataContext>
    <vms:ViewModel/>
  </UserControl.DataContext>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <lvc:CartesianChart Series="{Binding Series}">
      <!-- mark -untilCloses lvc:CartesianChart.TooltipTemplate -->
      <lvc:CartesianChart.TooltipTemplate>
        <DataTemplate>
          <Border Background="Transparent" Padding="12">
            <Border Background="#353535" CornerRadius="4"
                 BoxShadow="0 0 10 0 #40000000, 0 0 10 0 #40000000, 0 0 10 0 #40000000, 0 0 10 0 #40000000">
              <ItemsControl Items="{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
                            Foreground="#fafafa"
                            Text="{Binding AsTooltipString}"
                            Margin="0 0 8 0"
                            VerticalAlignment="Center"/>
                        <!-- LiveCharts uses the motion canvas control to display the series miniature -->
                        <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>
          </Border>
        </DataTemplate>
      </lvc:CartesianChart.TooltipTemplate>
    </lvc:CartesianChart>
  </Grid>  
</UserControl>