How to: Display Custom Tooltips for Series Points

• Jun 07, 2019
• 2 minutes to read

This example demonstrates how to display custom information from the underlying data source in a custom tooltip for every data point.

To accomplish this, it is necessary to handle the chart’s MouseMove event, obtain the current SeriesPoint via the ChartControl.CalcHitInfo method, and if the series point is not null (Nothing in Visual Basic), display a tooltip with its information.

Note that in addition to the MouseMove event, it is also necessary to handle the MouseLeave, to hide the tooltip when the mouse pointer is not over the chart.

If you wish to learn how to use built-in tooltips in your application, see the Tooltip topic.

View Example

Window1.xaml

<Window x:Class="DXChartsTooltips.Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        Title="Window1" Height="313" Width="455">
    <Grid>
        <dxc:ChartControl Name="chartControl1" MouseMove="chartControl1_MouseMove" 
                          MouseLeave="chartControl1_MouseLeave">
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D>
                    <dxc:XYDiagram2D.Series>
                        <dxc:BarSideBySideSeries2D DisplayName="My Series" ColorEach="True">
                            <dxc:BarSideBySideSeries2D.Points>
                                <dxc:SeriesPoint Argument="A" Value="1" />
                                <dxc:SeriesPoint Argument="B" Value="2" />
                                <dxc:SeriesPoint Argument="C" Value="6" />
                                <dxc:SeriesPoint Argument="D" Value="5" />
                                <dxc:SeriesPoint Argument="E" Value="3" />
                            </dxc:BarSideBySideSeries2D.Points>
                        </dxc:BarSideBySideSeries2D>
                    </dxc:XYDiagram2D.Series>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
        </dxc:ChartControl>
        <Popup x:Name="tooltip1" AllowsTransparency="True">
            <Border CornerRadius="9" Background="White" Padding="5"
                    BorderBrush="Black" BorderThickness="1" >
                <TextBlock x:Name="tooltip_text" />
            </Border>
        </Popup>
    </Grid>
</Window>

Window1.xaml.cs

using System.Windows;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
using DevExpress.Xpf.Charts;

namespace DXChartsTooltips {

    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }

        private void chartControl1_MouseMove(object sender, MouseEventArgs e) {
            ChartHitInfo hitInfo = chartControl1.CalcHitInfo(e.GetPosition(chartControl1));

            if (hitInfo != null && hitInfo.SeriesPoint != null) {
                SeriesPoint point = hitInfo.SeriesPoint;

                tooltip_text.Text = string.Format("Series = {0}\nArgument = {1}\nValue = {2}",
                    point.Series.DisplayName, point.Argument, point.Value);
                tooltip1.Placement = PlacementMode.Mouse;

                tooltip1.IsOpen = true;
                Cursor = Cursors.Hand;
            }
            else {
                tooltip1.IsOpen = false;
                Cursor = Cursors.Arrow;
            }
        }

        private void chartControl1_MouseLeave(object sender, MouseEventArgs e) {
            tooltip1.IsOpen = false;
        }

    }
}

Window1.xaml.vb

Imports Microsoft.VisualBasic
Imports System.Windows
Imports System.Windows.Controls.Primitives
Imports System.Windows.Input
Imports DevExpress.Xpf.Charts

Namespace DXChartsTooltips

    Partial Public Class Window1
        Inherits Window
        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub chartControl1_MouseMove(ByVal sender As Object, ByVal e As MouseEventArgs)
            Dim hitInfo As ChartHitInfo = chartControl1.CalcHitInfo(e.GetPosition(chartControl1))

            If hitInfo IsNot Nothing AndAlso hitInfo.SeriesPoint IsNot Nothing Then
                Dim point As SeriesPoint = hitInfo.SeriesPoint

                tooltip_text.Text = String.Format("Series = {0}" & Constants.vbLf & "Argument = {1}" & _
                    Constants.vbLf & "Value = {2}", point.Series.DisplayName, point.Argument, point.Value)
                tooltip1.Placement = PlacementMode.Mouse

                tooltip1.IsOpen = True
                Cursor = Cursors.Hand
            Else
                tooltip1.IsOpen = False
                Cursor = Cursors.Arrow
            End If
        End Sub

        Private Sub chartControl1_MouseLeave(ByVal sender As Object, ByVal e As MouseEventArgs)
            tooltip1.IsOpen = False
        End Sub

    End Class
End Namespace