see values of chart points when the mouse is on points

Question

I have a chart and I want the user to see the values when the pointer is on the points. By using digEmAll's help in the page finding the value of the points in a chart ,I could write the following code:

Point? prevPosition = null; 
ToolTip tooltip = new ToolTip();  

void chart1_MouseMove(object sender, MouseEventArgs e) 
{     
    var pos = e.Location;     
    if (prevPosition.HasValue && pos == prevPosition.Value)         
        return;     
    tooltip.RemoveAll();     
    prevPosition = pos;     
    var results = chart1.HitTest(pos.X, pos.Y, false, ChartElementType.PlottingArea);     
    foreach (var result in results)     
    {         
        if (result.ChartElementType == ChartElementType.PlottingArea)         
        {            
            chart1.Series[0].ToolTip = "X=#VALX, Y=#VALY";          
        }    
    } 
}

by the above code,the user can see the values when the pointer is near to a series.But now How can I let the user to see the values only when the pointer is on the points? I replaced

int k = result.PointIndex;
if (k >= 0)
{
    chart1.Series[0].Points[k].ToolTip = "X=#VALX, Y=#VALY";
}

instead of

chart1.Series[0].ToolTip = "X=#VALX, Y=#VALY";

to solve my problem.But It wasn't usefull.

score 28 · Accepted Answer · answered May 18 '12 at 09:17

You should modify the code in this way:

Point? prevPosition = null;
ToolTip tooltip = new ToolTip();

void chart1_MouseMove(object sender, MouseEventArgs e)
{
    var pos = e.Location;
    if (prevPosition.HasValue && pos == prevPosition.Value)
        return;
    tooltip.RemoveAll();
    prevPosition = pos;
    var results = chart1.HitTest(pos.X, pos.Y, false,
                                    ChartElementType.DataPoint);
    foreach (var result in results)
    {
        if (result.ChartElementType == ChartElementType.DataPoint)
        {
            var prop = result.Object as DataPoint;
            if (prop != null)
            {
                var pointXPixel = result.ChartArea.AxisX.ValueToPixelPosition(prop.XValue);
                var pointYPixel = result.ChartArea.AxisY.ValueToPixelPosition(prop.YValues[0]);

                // check if the cursor is really close to the point (2 pixels around the point)
                if (Math.Abs(pos.X - pointXPixel) < 2 &&
                    Math.Abs(pos.Y - pointYPixel) < 2)
                {
                    tooltip.Show("X=" + prop.XValue + ", Y=" + prop.YValues[0], this.chart1,
                                    pos.X, pos.Y - 15);
                }
            }
        }
    }
}

The idea is to check if the mouse is very close to the point e.g. 2 pixels around it (because is really unlikely to be exactly on the point) and show the tooltip in that case.

Here's a complete working example.

Working perfectly for primary axis. But the condition `(Math.Abs(pos.X - pointXPixel) < 2 && Math.Abs(pos.Y - pointYPixel) < 2)` fails for secondary axis series. — Ramesh Durai, May 31 '13 at 15:44
@RameshDurai: yes correct, this code considers only the primary axis. — digEmAll, May 31 '13 at 16:23
This code worked for me! However, I would like to know how to gain access to the event where the mouse has moved away from the datapoint (i.e. so I can change the datapoint color from COLOR_HOVERED to COLOR_NORMAL)... — Shane Sepac, May 10 '18 at 01:10
@Shn_Android_Dev : why don't you just set the hovered color in the if statement where there's the tooltip and in the "else" (meaning: the cursor is outside the point) part of the if statement you reset to normal ? — digEmAll, May 10 '18 at 13:42

jreichert · Answer 2 · 2018-07-03T04:38:36.330

9

I would take this solution:

Add custom tooltip event handler:

 this.chart1.GetToolTipText += this.chart1_GetToolTipText;

Implement event handler:

  private void chart1_GetToolTipText(object sender, ToolTipEventArgs e)
  {
     // Check selected chart element and set tooltip text for it
     switch (e.HitTestResult.ChartElementType)
     {
        case ChartElementType.DataPoint:
           var dataPoint = e.HitTestResult.Series.Points[e.HitTestResult.PointIndex];
           e.Text = string.Format("X:\t{0}\nY:\t{1}", dataPoint.XValue, dataPoint.YValues[0]);
           break;
     }
  }

edited Jul 03 '18 at 04:38

answered Sep 22 '15 at 09:55

jreichert

1,466
17
31

I have tried your code.It fires when my mouse is hover the chart but no tooltip has shown. – M_Mogharrabi Oct 10 '17 at 07:04
@M_Mogharrabi: I cannot test it yet, but from my memory: - You have to show the "point markers" - Do not set the ToolTip property of the data point, see https://stackoverflow.com/questions/14256283/show-tooltip-only-on-the-datapoint-for-line-graph-in-mschart – jreichert Oct 11 '17 at 08:38

score 4 · Answer 3 · edited Jul 27 '18 at 18:44

Consider the following as a possible better option than tooltips...use the label feature of the chart control.

DataPoint _prevPoint;
void chart1_MouseMove(object sender, MouseEventArgs e)
{
    // this if statement clears the values from the previously activated point.
    if (_prevPoint) {
        _prevPoint.MarkerStyle = MarkerStyle.None;
        _prevPoint.IsValueShownAsLabel = false;
    }

    var result = chart1.HitTest(e.X, e.Y, ChartElementType.DataPoint);
    if (result.ChartElementType == ChartElementType.DataPoint)
    {
        var prop = result.Object as DataPoint;
        if (prop != null)
        {
            prop.IsValueShownAsLabel = true;
            prop.MarkerStyle = MarkerStyle.Star4;
        }
    }
}

I've tested this and i'm using it currently. It's very nice on charts with a lot of points since it shows the marker on the chart as well.

Thanks, this is working. But I think there is one line missing after creating the marker `_prevPoint = prop` to store a reference of the previous marker. There are some typos in your code. I'll fix them. — AWolf, Apr 06 '18 at 14:41
It runs and the prop != null fires when I mouse over a data point, but I don't see a marker. Is that something that's supposed to popup? — Doug Null, Nov 24 '21 at 02:32

see values of chart points when the mouse is on points

3 Answers3

Linked