Add tooltip to legend in highcharts when hovering

15,406

Solution 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);
                }

            }
        }

Solution 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.

Share:
15,406

Related videos on Youtube

bubbles
Author by

bubbles

Updated on May 26, 2022

Comments

  • bubbles
    bubbles over 1 year

    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.

  • bubbles
    bubbles over 10 years
    how can I add this functionality to my Java Code? since im using GWT. i am currrently trying chart.setOption("/chart/events/load", "load: function()... ) but that does not seem to work
  • Paweł Fus
    Paweł Fus over 10 years
    Sorry, I'm not familiar with GWT adapter for Highcharts.