Custom Tooltip on LineChart (lvChart)

Question

I closely follow step-by-step lvChart Customizing Tooltips in trying to build a custom tooltip for LineChart points. But I get empty tooltip content. Other than using ObservableValue for ChartValues type, my code is near identical to that used in the lvChart tutorial. I am not using any MV**.

Has anyone worked out the tutorial or apply custom tooltip on a LineChart?

Main.xaml

<lvc:CartesianChart.DataTooltip>
    <local:MyTooltip />
</lvc:CartesianChart.DataTooltip>

Main.xaml.cs

MyTooltipContents = new ChartValues<MyTooltipContent>();

for (int i = 0; i < MyData.Count(); i++)
{
    MyTooltipContents.Add(new MyTooltipContent
    {
        Name = "No" + i,
        Value = "Foo"
    });     
}

var MyTooltipContentMapper = Mappers.Xy<MyTooltipContent>()
    .X((value, index) => index) 
    .Y(value => 1);          

//lets save the mapper globally
Charting.For<MyTooltipContent>(MyTooltipContentMapper);
DataContext = this;

MyTooltip.xaml

<UserControl x:Class="MyNamespace.MyTooltip"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:local="clr-namespace:MyNamespace"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" 
             d:DataContext="{d:DesignInstance local:MyTooltip}"
             Background="#E4555555" Padding="20 10" BorderThickness="2" BorderBrush="#555555">

    <ItemsControl ItemsSource="{Binding Data.Points}" Grid.IsSharedSizeScope="True">
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type lvc:DataPointViewModel}">
                <Grid Margin="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="Name"/>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="Value"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Column="1" Text="{Binding ChartPoint.Instance.(local:MyTooltipContent.Name)}" 
                               Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White" />

                    <TextBlock Grid.Column="2" Text="{Binding ChartPoint.Instance.(local:MyTooltipContent.Value)}" 
                               Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>

                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

MyToolTip.xaml.cs

public partial class MyTooltip : IChartTooltip
{
    private TooltipData _data;

    public MyTooltip()
    {
        InitializeComponent();
        DataContext = this;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public TooltipData Data
    {
        get { return _data; }
        set
        {
            _data = value;
            OnPropertyChanged("Data");
        }
    }

    public TooltipSelectionMode? SelectionMode { get; set; }

    protected virtual void OnPropertyChanged(string propertyName = null)
    {
        if (PropertyChanged != null)
            PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

MyTooltipContent.cs

public class MyTooltipContent
{
    public string Name { get; set; }
    public string Value { get; set; }
}

Albert · Answer 1 · 2022-03-12T12:17:54.337

I copied your example, and it works for me.

You might want to look at your MyTooltipContents declaration on your Main.xaml.cs, which should be a public property:

    public ChartValues<MyTooltipContent> MyTooltipContents { get; set; }

I don't know exactly what gave you your line series, but I used this one on my MainWindow.xaml (corresponds to your Main.xaml):

<Window x:Class="MyToolTipExample.MainWindow"
        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:local="clr-namespace:MyToolTipExample"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <lvc:CartesianChart LegendLocation="Right">
            <lvc:CartesianChart.Series>
                <lvc:LineSeries Title="Customers" Values="{Binding MyTooltipContents}"></lvc:LineSeries>
            </lvc:CartesianChart.Series>

            <lvc:CartesianChart.DataTooltip>
                <local:MyTooltip/>
            </lvc:CartesianChart.DataTooltip>
        </lvc:CartesianChart>
    </Grid>
</Window>

Note that MyTooltipContents is bound to the LineSeries.

EDIT: included screenshot.

Below, the full code example (.Net Framework 4.8 and LiveCharts 0.9.7):

1 - MainWindow.xaml.cs (the corresponding MainWindow.xaml is above):

namespace MyToolTipExample
{

    public partial class MainWindow : Window
    {
        public ChartValues<MyTooltipContent> MyTooltipContents { get; set; }

        public MainWindow()
        {
            
            InitializeComponent();

            MyTooltipContents = new ChartValues<MyTooltipContent>();

            for (int i = 0; i < 50; i++) 
            {
                MyTooltipContents.Add(new MyTooltipContent
                {
                    Name = $"No{i}",
                    Value = "Foo"
                });
            }

            var MyTooltipContentMapper = Mappers.Xy<MyTooltipContent>()
            .X((value, index) => index)
            .Y(value => 1);

            //lets save the mapper globally
            Charting.For<MyTooltipContent>(MyTooltipContentMapper);
            DataContext = this;

        }
    }
}

2 - the UserControl MyTooltip.xaml:

<UserControl x:Class="MyToolTipExample.MyTooltip"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             xmlns:local="clr-namespace:MyToolTipExample"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             d:DataContext="{d:DesignInstance local:MyTooltip}"
             Background="#45555555" Padding="20 10" BorderThickness="2" BorderBrush="#555555">
    <ItemsControl ItemsSource="{Binding Data.Points}" Grid.IsSharedSizeScope="True">
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type lvc:DataPointViewModel}">
                <Grid Margin="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="Name"/>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="Value"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Column="1" Text="{Binding ChartPoint.Instance.(local:MyTooltipContent.Name)}" 
                               Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White" />

                    <TextBlock Grid.Column="2" Text="{Binding ChartPoint.Instance.(local:MyTooltipContent.Value)}" 
                               Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>

                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

3 - Code-behind the UserControl MyTooltip.xaml.cs:

using LiveCharts;
using LiveCharts.Wpf;
using System.ComponentModel;
using System.Windows.Controls;

namespace MyToolTipExample
{

    public partial class MyTooltip : UserControl, IChartTooltip
    {
        public MyTooltip()
        {
            InitializeComponent();
            DataContext = this;
        }

        private TooltipData _data;
        public event PropertyChangedEventHandler PropertyChanged;

        public TooltipData Data
        {
            get { return _data; }
            set
            {
                _data = value;
                OnPropertyChanged("Data");
            }
        }

        public TooltipSelectionMode? SelectionMode { get; set; }

        protected virtual void OnPropertyChanged(string propertyName = null)
        {
            if (PropertyChanged != null)
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

4 - Data model MyTooltipContent.cs (used by public property ChartValues):

namespace MyToolTipExample
{
    public class MyTooltipContent
    {
        public string Name { get; set; }
        public string Value { get; set; }
    }
}

5 - Package.config:

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="LiveCharts" version="0.9.7" targetFramework="net48" />
  <package id="LiveCharts.Wpf" version="0.9.7" targetFramework="net48" />
</packages>

6 - The final solution structure should look something like this:

Can you please post the complete example/project? I cant make it run based on the question and answer. Many thanks — user3641311, Mar 10 '22 at 15:14
No probs. I included the remaining of the code below my previous answer. — Albert, Mar 12 '22 at 12:14
You're the man!!! :) Many thanks :) I'll give feedback later :) — user3641311, Mar 14 '22 at 11:32

score 0 · Answer 2 · answered Apr 20 '22 at 08:44

The application would be crashed when I used the PieChart to customize the ToolTip?

    <Window x:Class="MyToolTipExample.MainWindow"
            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:local="clr-namespace:MyToolTipExample"
            xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
            mc:Ignorable="d"
            Title="MainWindow" Height="450" Width="800">
            <Grid>`enter code here`
        <lvc:PieChart>
            <lvc:PieChart.Series>
                <lvc:PieSeries  Fill="Green" Stroke="{x:Null}" StrokeThickness="0" />
            </lvc:PieChart.Series>
            <lvc:PieChart.DataTooltip>
                <local:MyTooltip/>
            </lvc:PieChart.DataTooltip>
        </lvc:PieChart>
    </Grid>
    </Window>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Apr 20 '22 at 11:52

Custom Tooltip on LineChart (lvChart)

2 Answers2