How to: Show Custom Information in a Crosshair Cursor Tooltip

• Nov 15, 2018
• 3 minutes to read

This example demonstrates how to display custom information from the underlying datasource in a crosshair cursor tooltip for every series point.

For this example to work correctly, do the following.

1. Start MS Visual Studio (2008, 2010 or 2012).
2. Create a new Windows Forms Application, or open an existing one.
3. Drop the ChartControl onto the form.
4. Add a single Bar Series to the chart, then bind it to the Products table from the nwind.mdb database (see Lesson 3 - Bind Chart Series to Data to learn how to do this).
5. Set the series’ SeriesBase.ArgumentDataMember property to ProductName and its SeriesBase.ValueDataMembers.Value property to UnitPrice.
6. Then handle the ChartControl.CustomDrawCrosshair event, as shown in the code below.

C#

using System;
using System.Data;
using System.Windows.Forms;
using DevExpress.XtraCharts;

namespace CustomInfoInTooltips {
    public partial class Form1 : Form {
        public Form1() {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e) {
            // This line of code loads data into the 'nwindDataSet.Products' table. You can move, or remove it, as needed.
            this.productsTableAdapter.Fill(this.nwindDataSet.Products);

        }

        private void chartControl1_CustomDrawCrosshair(object sender, CustomDrawCrosshairEventArgs e) {
            foreach (CrosshairElement element in e.CrosshairElements) {
                {
                    SeriesPoint currentPoint = element.SeriesPoint;

                    if (currentPoint.Tag.GetType() == typeof(DataRowView)) {
                        DataRowView rowView = (DataRowView)currentPoint.Tag;
                        string s = "Unit price = " + rowView["UnitPrice"].ToString() +
                            "\r\nUnits in stock = " + rowView["UnitsInStock"].ToString() +
                            "\r\nQuantity per unit = " + rowView["QuantityPerUnit"].ToString();

                        element.LabelElement.Text = s;

                    }
                }
            }
        }
    }
}

VB.NET

Imports Microsoft.VisualBasic
Imports System
Imports System.Data
Imports System.Windows.Forms
Imports DevExpress.XtraCharts

Namespace CustomInfoInTooltips
    Partial Public Class Form1
        Inherits Form
        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
            ' This line of code loads data into the 'nwindDataSet.Products' table. You can move, or remove it, as needed.
            Me.productsTableAdapter.Fill(Me.nwindDataSet.Products)

        End Sub

        Private Sub chartControl1_CustomDrawCrosshair(ByVal sender As Object, ByVal e As CustomDrawCrosshairEventArgs) Handles chartControl1.CustomDrawCrosshair
            For Each element As CrosshairElement In e.CrosshairElements
                    Dim currentPoint As SeriesPoint = element.SeriesPoint

                    If currentPoint.Tag.GetType() Is GetType(DataRowView) Then
                        Dim rowView As DataRowView = CType(currentPoint.Tag, DataRowView)
                        Dim s As String = "Unit price = " & rowView("UnitPrice").ToString() & Constants.vbCrLf & "Units in stock = " & rowView("UnitsInStock").ToString() & Constants.vbCrLf & "Quantity per unit = " & rowView("QuantityPerUnit").ToString()

                        element.LabelElement.Text = s

                    End If
            Next element
        End Sub
    End Class
End Namespace

The result of executing this code is shown in the following image.

Tip

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E126.