Add tooltip to legend in highcharts when hovering

Question

Id like to let the user know that he can remove items from the legend by simply clicking on them. To some, this may be intuitive but others may not know that they can do that. I would like to let the users know when they over the legend item that then can click to remove it.

I am using the GWT-wrapper class for highcharts.

Thank you.

Answer 1

Highcharts doesn't have built-in tooltip for item legend, but still you can create your own tooltip for that. It's simple to add custom events to legendItem (mouseover and mouseout for example) and show that tooltip.

See example how to add events to elements in Highcharts: http://jsfiddle.net/rAsRP/129/

        events: {
            load: function () {
                var chart = this,
                    legend = chart.legend;

                for (var i = 0, len = legend.allItems.length; i < len; i++) {
                    (function(i) {
                        var item = legend.allItems[i].legendItem;
                        item.on('mouseover', function (e) {
                            //show custom tooltip here
                            console.log("mouseover" + i);
                        }).on('mouseout', function (e) {
                            //hide tooltip
                            console.log("mouseout" + i);
                        });
                    })(i);
                }

            }
        }

Answer 2

There is another opportunity to get tooltips at hovering over the Highcharts legend. You just need to enable useHTML for the legend and redefine the labelFormatter function; this function should return the label text enclosed into the "span" tag. In this "span" tag one may include a class to apply jQuery-based tooltips (jQuery UI or Bootstrap for example). Also it is possible to transfer some data (for example, the index of a legend item) using the 'data-xxx' attribute:

labelFormatter: function () {
    return '<span class="abc" data-index="' + this.index + '">' + this.name + '</span>';
}

Tooltips can be formatted as you wish; hyperlinks are also possible. The fiddle is here.

Answer 3

Although there're great answers already, I still want to share my simplified solution (inspired by the answers provided above).

If you just need a plain text tooltip, you can use title attribute of <span> (W3 School, title attribute - most often shown as a tooltip text when the mouse moves over the element.) No jQuery setup is needed then.

In your Highcharts options object set legend.useHTML: true & configure legend.labelFormatter:

legend: {
    enabled: true,
    useHTML: true,
    labelFormatter: function () {
        // if legendTooltip set, put it into title attr
        if (this.options.custom && this.options.custom.legendTooltip) {
            return '<span title="' + this.options.custom.legendTooltip + '">' + this.name + '</span>';
        }
        return '<span>' + this.name + '</span>';
    }
},

And add custom.legendTooltip to the options object of a series you want a tooltip for:

series: [{
    name: 'counter',
    data: [110, 50, 130],
    custom: {
        // provide a tooltip text here:
        legendTooltip: "Counter custom tooltip"
    }

}]

(using custom obj is recommended by Highcharts)

Also see the JS fiddle: http://jsfiddle.net/uhocybpj/8/

Answer 4

You can do that.

At first, Highcharts has callback function.
https://stackoverflow.com/a/16191017

And modified version Tipsy can show tooltip in SVG.
http://bl.ocks.org/ilyabo/1373263
*Use jquery.tipsy.js and tipsy.css on this page.

Then, start highcharts like this.

$('#your-chart').highcharts(your_chart_options,function(chart){
    $('#your-chart').find('.highcharts-legend-item').each(function(){
        // set title text example
        var _text = $(this).text(),
            _title = '';
        switch(_text){
            case "legend 1":
                _title = 'legend 1 title';
                break;
            case "legend 2":
                _title = 'legend 2 title';
                break;
        }
        // add <title> tag to legend item
        $(this).append($('<title></title>').text(_title));
    });
    $('#your-chart').find(".highcharts-legend-item").tipsy({
        gravity: 's',
        fade: true
    })
});