Posted by: Cirilo Meggiolaro | 01/11/2009

Tip of the day #89 – Exploring the Microsoft Chart control – Custom Tooltips

The chart control has an event named GetTooltipText that retrieves the X and Y coordinates, a text property and a HitTestResult object containing all information about the chart element where the mouse is over. You may use this event to display custom tooltips.

How to…

The first task you need to perform is to add an GetTooltipText event handler to your chart control:

this.myChart.GetToolTipText += new System.EventHandler<System.Windows.Forms.DataVisualization.Charting.ToolTipEventArgs>(this.myChart_GetToolTipText);

In the event body we are going to check the chart element type that raised the event and display literal or dynamic tooltips:

private void myChart_GetToolTipText(object sender, ToolTipEventArgs e)
{
    switch (e.HitTestResult.ChartElementType)
    {
        case ChartElementType.Annotation:
            e.Text = “This is an annotation.”;
            break;
        case ChartElementType.Axis:
            e.Text = string.Format(“This is the axis {0}”, e.HitTestResult.Axis.AxisName);
            break;
        case ChartElementType.AxisLabelImage:
            e.Text = “This is the AxisLabelImage”;
            break;
        case ChartElementType.AxisLabels:
            e.Text = “This is an AxisLabel”;
            break;
        case ChartElementType.AxisTitle:
            e.Text = string.Format(“Axis title: {0}”, e.HitTestResult.Axis.Title);
            break;
        case ChartElementType.DataPoint:
            e.Text = string.Format(“This is the data point {0}”, e.HitTestResult.PointIndex.ToString());
            break;
        case ChartElementType.DataPointLabel:
            e.Text = string.Format(“This is the data point {0}”, e.HitTestResult.Series.Points[e.HitTestResult.PointIndex].Label);
            break;
        case ChartElementType.Gridlines:
            e.Text = “This is a gridline.”;
            break;
        case ChartElementType.LegendArea:
            e.Text = “This is the legend area.”;
            break;
        case ChartElementType.LegendHeader:
            e.Text = “This is the legend header.”;
            break;
        case ChartElementType.LegendItem:
            e.Text = “This is a legend item.”;
            break;
        case ChartElementType.LegendTitle:
            e.Text = “This is the legend title.”;
            break;
        case ChartElementType.Nothing:
            e.Text = “This is an undefined object.”;
            break;
        case ChartElementType.PlottingArea:
            e.Text = “This is a plotting area.”;
            break;
        case ChartElementType.ScrollBarLargeDecrement:
            e.Text = “This is a scrollbar large decrement button.”;
            break;
        case ChartElementType.ScrollBarLargeIncrement:
            e.Text = “This is a scrollbar large increment button.”;
            break;
        case ChartElementType.ScrollBarSmallDecrement:
            e.Text = “This is a scrollbar small decrement button.”;
            break;
        case ChartElementType.ScrollBarSmallIncrement:
            e.Text = “This is a scrollbar small increment button.”;
            break;
        case ChartElementType.ScrollBarThumbTracker:
            e.Text = “This is a scrollbar thumb.”;
            break;
        case ChartElementType.ScrollBarZoomReset:
            e.Text = “This is a scrollbar zoom reset button.”;
            break;
        case ChartElementType.StripLines:
            e.Text = “This is a strip line.”;
            break;
        case ChartElementType.TickMarks:
            e.Text = “This is a tick mark.”;
            break;
        case ChartElementType.Title:
            e.Text = “This is a title.”;
            break;
        default:
            break;
    }
}

Examples

The following pictures show the result of the event above.

Picture 1 - Tooltip for an annotation

Picture 1 - Tooltip for an annotation

Picture 2 - Tooltip for data point.

Picture 2 - Tooltip for data point.

Picture 3 - Tooltip for Y-axis

Picture 3 - Tooltip for Y-axis


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: