Customize default tooltips
The next article is a quick guide on how to customize the default tooltip,if you want to learn more you can read the full article:
Go to the full tooltips articleYou can quickly change the position, the font, the text size or the background color:
View
<UserControl
x:Class="UnoWinUISample.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"
TooltipTextPaint="{Binding TooltipTextPaint}"
TooltipBackgroundPaint="{Binding TooltipBackgroundPaint}"
TooltipTextSize="16">
</lvc:CartesianChart>
</Grid>
</UserControl>
View model
[ObservableObject]
public partial class ViewModel
{
public ISeries[] Series { get; set; } = { ... };
public Axis[] XAxes { get; set; } = { ... };
public Axis[] YAxes { get; set; } = { ... };
public SolidColorPaint TooltipTextPaint { get; set; } = // mark
new SolidColorPaint // mark
{ // mark
Color = new SKColor(242, 244, 195), // mark
SKTypeface = SKTypeface.FromFamilyName("Courier New") // mark
}; // mark
public SolidColorPaint TooltipBackgroundPaint { get; set; } = // mark
new SolidColorPaint(new SKColor(72, 0, 50)); // mark
}
Tooltip control from scratch
You can also create your own tooltip, the recommended way is to use the LiveCharts API (example bellow) but you can
use anything as tooltip as soon as it implements the IChartTooltip<T>
interface. AT the following example we build
a custom control to render tooltips in our charts using the LiveCharts API.
CustomTooltip.cs
using System;
using System.Collections.Generic;
using LiveChartsCore;
using LiveChartsCore.Drawing;
using LiveChartsCore.Kernel;
using LiveChartsCore.Kernel.Sketches;
using LiveChartsCore.Measure;
using LiveChartsCore.SkiaSharpView.Drawing;
using LiveChartsCore.SkiaSharpView.Drawing.Geometries;
using LiveChartsCore.SkiaSharpView.Painting;
using LiveChartsCore.SkiaSharpView.VisualElements;
using LiveChartsCore.VisualElements;
using SkiaSharp;
namespace ViewModelsSamples.General.TemplatedTooltips;
public class CustomTooltip : IChartTooltip<SkiaSharpDrawingContext>
{
private StackPanel<RoundedRectangleGeometry, SkiaSharpDrawingContext>? _stackPanel;
private static readonly int s_zIndex = 10100;
private readonly SolidColorPaint _backgroundPaint = new(new SKColor(28, 49, 58)) { ZIndex = s_zIndex };
private readonly SolidColorPaint _fontPaint = new(new SKColor(230, 230, 230)) { ZIndex = s_zIndex + 1 };
public void Show(IEnumerable<ChartPoint> foundPoints, Chart<SkiaSharpDrawingContext> chart)
{
if (_stackPanel is null)
{
_stackPanel = new StackPanel<RoundedRectangleGeometry, SkiaSharpDrawingContext>
{
Padding = new Padding(25),
Orientation = ContainerOrientation.Vertical,
HorizontalAlignment = Align.Start,
VerticalAlignment = Align.Middle,
BackgroundPaint = _backgroundPaint
};
_stackPanel
.Animate(
new Animation(EasingFunctions.BounceOut, TimeSpan.FromSeconds(1)),
nameof(_stackPanel.X),
nameof(_stackPanel.Y));
}
// clear the previous elements.
foreach (var child in _stackPanel.Children.ToArray())
{
_ = _stackPanel.Children.Remove(child);
chart.RemoveVisual(child);
}
foreach (var point in foundPoints)
{
var sketch = ((IChartSeries<SkiaSharpDrawingContext>)point.Context.Series).GetMiniaturesSketch();
var relativePanel = sketch.AsDrawnControl(s_zIndex);
var label = new LabelVisual
{
Text = point.Coordinate.PrimaryValue.ToString("C2"),
Paint = _fontPaint,
TextSize = 15,
Padding = new Padding(8, 0, 0, 0),
ClippingMode = ClipMode.None, // required on tooltips // mark
VerticalAlignment = Align.Start,
HorizontalAlignment = Align.Start
};
var sp = new StackPanel<RoundedRectangleGeometry, SkiaSharpDrawingContext>
{
Padding = new Padding(0, 4),
VerticalAlignment = Align.Middle,
HorizontalAlignment = Align.Middle,
Children =
{
relativePanel,
label
}
};
_stackPanel?.Children.Add(sp);
}
var size = _stackPanel.Measure(chart);
var location = foundPoints.GetTooltipLocation(size, chart);
_stackPanel.X = location.X;
_stackPanel.Y = location.Y;
chart.AddVisual(_stackPanel);
}
public void Hide(Chart<SkiaSharpDrawingContext> chart)
{
if (chart is null || _stackPanel is null) return;
chart.RemoveVisual(_stackPanel);
}
}
View
<UserControl
x:Class="UnoWinUISample.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.Tooltip -->
<lvc:CartesianChart.Tooltip>
<vms:CustomTooltip></vms:CustomTooltip>
</lvc:CartesianChart.Tooltip>
</lvc:CartesianChart>
</Grid>
</UserControl>