Skip to main content

How to: Display Custom Tooltips for Series Points

  • 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

<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>
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;
        }

    }
}