How to display the tooltip when the mouse is in any region of the FastLineBitmapSeries in WPF Chart (SfChart)?

This article explains how to display a tooltip when the mouse is over any region of the FastLineBitmapSeries.

By default, the tooltip is displayed over the detect area of the chart data point. This detect area is calculated based on the chart size.

You can display the tooltip in all regions of the series by manually updating it in the MouseMove event of the SfChart. The following steps will assist you to update the tooltip manually for FastLineBitmapSeries.

Step 1: Create a custom chart by inheriting it from SfChart and declare AdorningCanvas property as type Canvas. Override the OnApplyTemplate() template method and define the AdorningCanvas property in it. This AdorningCanvas helps in calculating the position of the mouse in the series.

public class CustomSfChart : SfChart
{
    public Canvas AdorningCanvas { get; set; }
 
    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        AdorningCanvas = GetTemplateChild("adorningCanvas") as Canvas;
    }
}

Defining the custom chart.

<local:CustomSfChart>
   …
</local:CustomSfChart>

Step 2: Create custom series to access certain internal elements of the chart series. The internal field mousePos, internal methods IsHitTestSeries(), UpdateSeriesTooltip(), and SeriesPanel are updated and used to calculate and display the tooltip manually.

public class CustomFastLineBitmapSeries : FastLineBitmapSeries
{
    // This is the MethodInfo to get the IsHitTestMethod. IsHitTestMethod Checks whether the mouse is over the series.
    public MethodInfo IsHitTestMethodInfo { get; set; }
 
    // This is a reference panel to get the nearest chart data point.
    public ChartSeriesPanel SeriesPanel { get; set; }
 
    // This fieldinfo helps us to update mouse point.
    private FieldInfo mousePointInfo;
 
    // This is the MethodInfo to get the UpdateSeriesTooltip method. UpdateSeriesTooltip method updates the tooltip according to the data point provided.
    private MethodInfo updateSeriesTooltipMethodInfo;
 
    public CustomFastLineBitmapSeries()
    {
        mousePointInfo = this.GetType().GetField("mousePos", BindingFlags.NonPublic | BindingFlags.Instance);
        IsHitTestMethodInfo = this.GetType().GetMethod("IsHitTestSeries", BindingFlags.NonPublic | BindingFlags.Instance);
        updateSeriesTooltipMethodInfo = this.GetType().GetMethod("UpdateSeriesTooltip", BindingFlags.NonPublic | BindingFlags.Instance);
    }
 
    // This method is overridden to get the SeriesPanel.
    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        SeriesPanel = this.GetTemplateChild("seriesPanel") as ChartSeriesPanel;
    }
 
    // Checks whether the mouse has hit the series.
    public bool IsHitTestSeries()
    {
        return (bool)IsHitTestMethodInfo?.Invoke(this, null);
    }
 
    // Updates the mouse point when it is moved.
    public void SetMousePoint(Point point)
    {
        mousePointInfo?.SetValue(this, point);
    }
 
    // Updates the tooltip according to the given data point.
    public void UpdateSeriesTooltip(ChartDataPointInfo dataPoint)
    {
        updateSeriesTooltipMethodInfo?.Invoke(this, new object[] { dataPoint });
    }
}

Defining the custom series

<local:CustomSfChart>
    ...
    <local:CustomFastLineBitmapSeries />
</local:CustomSfChart>

Step 3: Create the DataModel that passes data to update the tooltip manually.

public class ChartDataPointInfo : ChartSegment
{ 
    public double XData { get; set; }
    public double YData { get; set; }
}

Step 4: By raising the MouseMove event of the chart and in its handler, the tooltip position can be calculated and displayed. The chart data near the mouse position is calculated using the FindNearestChartPoint() method of the series and this point is used in the UpdateSeriesTooltip() method to show the tooltip.

<local:CustomSfChart x:Name="Chart" MouseMove="Chart_MouseMove" Margin="5">

Output:

The following chart shows the tooltip when the mouse is placed in any part of the series.

KB article - How to display the tooltip when the mouse is in any region of the FastLineBitmapSeries in WPF Chart

See also

How to export chart as image

How to add trackball in WPF Chart

How to do zooming and panning in WPF Chart