How to Customize ToolTip on Chart Data using c#

Question

I have a chart where the y axis is currency in integer (seconds). I'm trying to show a 'customized' ToolTip (HH:MM:SS) i converted the seconds to this format but i don't know how to show it on ToolTip on an MSChart on an asp.net page ?

lunarquaker lunarquaker · Accepted Answer · 2015-11-13T20:49:35

I don't like to use the ToolTip property of asp.net chart controls, because they don't work in some versions of Internet Explorer. Here is a good way to achieve what you are trying to do. First, create two javascript functions (we'll call them f1 and f2). These two functions will be used to respond to mouse events. In this example, the f1 function receives the event as well as a string to be displayed in the tool tip popup. The f2 function hides the tool tip popup.

function f1(e, str) {
    tooltip = document.getElementById("toolTip");
    tooltip.innerHTML = str;
    if (!e) var e = window.event;
    var posx = 0;
    var posy = 0;
    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY) {
        posx = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
    }
    posy = Math.round(posy);
    posx = Math.round(posx);
    tooltip.style.top = posy + 'px';
    tooltip.style.left = posx + 'px';
}
function f2() {
    document.getElementById("toolTip").innerHTML = "";
}

Now, for the tool tip popup, we create a div in the .aspx page like this. Makes its positioning absolute so we can place it anywhere on the page. You can add all the customization you want to the div, but in this case we will just be showing some text:

<div style="position:absolute; background-color:White; color:Black; id="toolTip"></div>

Now, in your code-behind, you can associate elements of your asp.net chart with events that will trigger the f1 and f2 javascript functions. From your question, it is unclear which part of the chart you want to associate with the tool tip. In this example, we will show a the tool tip popup when the mouse hovers over a data point, and hide it when it leaves the data point.

int count = graph.Series["Default"].Points.Count;
for (int i = 0; i < count; i++)
{
    string toolTipText = "My Text";
    graph.Series["Default"].Points[i].MapAreaAttributes =   "onmouseover=\"f1(event, '" + toolTipText + "')\" onmouseout=\"f2()\"";
}

If a delay before showing the tool tip popup is desired, you can add the delay to the javascript. You can use a similar technique to trigger the tool tip on other parts of your chart.

How to Customize ToolTip on Chart Data using c#

1 Answers