This example demonstrates how to display custom information from the underlying datasource 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
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;
}
}
}
<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>
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