Customizing Highcharts – Tooltip Visibility

Let’s play around with the Highcharts tooltip some more. Last time we saw how to customize the position of the Highcharts tooltip, today we shall look at how to work around the visibility of the tooltip.

The outcome of this exercise would be

The default behavior of the tooltip is to show up when the user hovers over a point, the tooltip then stays visible as long as the user is still interacting with the points on the chart. The tooltip fades out with a delay after the user moves outside the chart area. Let’s see how to prevent this fading out and always have the tooltip persist on the chart area even after the mouse has moved outside the chart area.

In the process, we shall also learn about Extending Highcharts. Let’s extend the Highcharts.Tooltip class using the very convenient Highcharts.wrap method.

JavaScript with its dynamic nature is extremely powerful when it comes to altering the behaviour of scripts on the fly. In Highcharts we created a utility called wrap, which wraps an existing prototype function (“method”) and allows you to add your own code before or after it.

The wrap function accepts the parent object as the first argument, the name of the function to wrap as the second, and a callback replacement function as the third. The original function is passed as the first argument to the replacement function, and original arguments follow after that.

Let’s get wrapping. We will create a quick Highcharts plugin that overrides the Highcharts.Tooltip.prototype.hide behavior. We want the tooltip to persist, in other words we don’t want the tooltip to hide. Let’s override the hide method with a no-op method.

(function (H) {
    H.wrap(H.Tooltip.prototype, 'hide', function (defaultCallback) {
        /*
            ░░░░░▄▄▄▄▀▀▀▀▀▀▀▀▄▄▄▄▄▄░░░░░░░
            ░░░░░█░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░▀▀▄░░░░
            ░░░░█░░░▒▒▒▒▒▒░░░░░░░░▒▒▒░░█░░░
            ░░░█░░░░░░▄██▀▄▄░░░░░▄▄▄░░░░█░░
            ░▄▀▒▄▄▄▒░█▀▀▀▀▄▄█░░░██▄▄█░░░░█░
            █░▒█▒▄░▀▄▄▄▀░░░░░░░░█░░░▒▒▒▒▒░█
            █░▒█░█▀▄▄░░░░░█▀░░░░▀▄░░▄▀▀▀▄▒█
            ░█░▀▄░█▄░█▀▄▄░▀░▀▀░▄▄▀░░░░█░░█░
            ░░█░░░▀▄▀█▄▄░█▀▀▀▄▄▄▄▀▀█▀██░█░░
            ░░░█░░░░██░░▀█▄▄▄█▄▄█▄████░█░░░
            ░░░░█░░░░▀▀▄░█░░░█░█▀██████░█░░
            ░░░░░▀▄░░░░░▀▀▄▄▄█▄█▄█▄█▄▀░░█░░
            ░░░░░░░▀▄▄░▒▒▒▒░░░░░░░░░░▒░░░█░
            ░░░░░░░░░░▀▀▄▄░▒▒▒▒▒▒▒▒▒▒░░░░█░
            ░░░░░░░░░░░░░░▀▄▄▄▄▄░░░░░░░░█░░
            */
    });
}(Highcharts));

For the minimalists, the following code also does the exact same thing

(function (H) {
    H.wrap(H.Tooltip.prototype, 'hide', function () {});
}(Highcharts));

Although, we have completely removed the hide functionality in the above example, we sometimes may want this to happen conditionally. The wrap method provides the original method as the first parameter too and we could use it for pre-processing, post-processing, conditional processing, etc.

(function (H) {
        H.wrap(H.Tooltip.prototype, 'hide', function (defaultCallback) {
            // Pre Processing
            if (/* .. */) {
                //Do Nothing (Do Not Hide)
            } else { // Call the default Hide Callback
                defaultCallback.apply(this);
            }
            // Post Processing
        });
    }(Highcharts));

If you noticed the demo carefully, you see the tooltip does persist but the tooltip does not come up till the user hovers over the chart once. We may want to force the showing of tooltip on load, let us see how to accomplish that.

The tooltip object has a refresh method on it, this method takes the points on which the tooltip shall show up. In case of a shared tooltip this argument would be an array, otherwise the method takes a single point as the argument. Following code would bring up the tooltip on the 3rd point on the 2nd series.

chart.tooltip.refresh(chart.series[1].points[2]);
// If the tooltip.shared=true, the parameter is an array of points
chart.tooltip.refresh([chart.series[1].points[2]]);

Invoking the above immediately after the chart instantiation shall show the tooltip on load, and clubbing with the previous plugin we shall have an ever persisting tooltip.

Here is the example we began with and see what can be accomplished by combining the techniques together

Reference Links

Latest posts by Jugal Thakkar (see all)