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

            }
        }