Trigger Pie Chart Tooltips on Legend Item Hover

[peter petersen]

Is there a way to trigger the tooltips of a pie chart to be displayed when hovering the corresponding legend item?

Is there in general a way to manually trigger a tooltip to be shown? I only found the functions tooltip.hide() and tooltip.refresh() on the chart object. I'm missing something like tooltip.show(pointToShowTooltipFor);

Thanks for any advice.

[not]

Hi Peter,
you were close :) Try:

Code: Select all

chart.tooltip.refresh(chart.series[0].data[1]);

[peter petersen]

Thanks for the hint. Sounds good.

Now I am searching for an event fired by the legend items to hook in but it seems like there only is a legendItemClick event. Did I miss something?

I tried

Code: Select all

events: {
            click: function() { console.log("click"); },
            checkboxClick: function() { console.log("checkboxClick"); },
            hide: function() { console.log("hide"); },
            legendItemClick: function() { console.log("legendItemClick"); },
            mouseOver: function() { console.log("mouseOver"); },
            mouseOut: function() { console.log("mouseOut"); },
            show: function() { console.log("show"); }
          }

but none of the events fires on hovering a legend item.

If this is not possible with the highcharts API are there any valid selectors to relieably query the legend items and manually add listeners on mouseover/mouseout?

Thanks again

[not]

Ugh, it took me a while but I finally found it out :)

Code: Select all

$('#container .highcharts-legend text').hover(function() {
    console.log('Legend mouseOver');
});

[peter petersen]

Puh, I finally did it:

Code: Select all

$('.highcharts-legend text').each(function(index, element) {
    $(element).hover(function() {
        chart.tooltip.refresh(chart.series[0].data[index]);
    },function() {
        chart.tooltip.hide();
    })
});


--> http://jsfiddle.net/ArmRM/481/

Thanks for the help.

[peter petersen]

Btw: Isnt this a useful feature the highcharts library could support in future versions? It could also support an event for legendItemHover.

[baydin]

I could not figure out how to use this workaround.

Code: Select all

$('#container1.highcharts-legend text').hover(function() {
    chart_ul_gprs_ul.exportChart();
});

Should this code provide exporting when mouse on legend?

[admin]

Exporting when your users mouse over the legend - that's pretty aggressive don't you think? Anyway, the jQuery code won't work in IE as IE uses HTML/VML for text. I recommend using a button or a link for exporting, like in the examples in the reference.

[baydin]

I do not want to have export on hover, I just asked to understand the usage. What I want is a tooltip poping up showing the value when mouse on legend item like when mouse on a pie slice.

[admin]

It is demonstrated above: http://jsfiddle.net/ArmRM/481/

[baydin]

I checked it but in this example nothing happens when mouse is on the legend or should I change the function "refresh" there and use whatever I need?

[hfrntt]

But in this example tooltip's poping up when mouse is over the legend, and it works Which browser are you using?

[baydin]

I am using IE8, it worked on chrome and firefox but it did not work on IE8

[hfrntt]

I am using IE8, it worked on chrome and firefox but it did not work on IE8

a few messages before:

Anyway, the jQuery code won't work in IE as IE uses HTML/VML for text.

[baydin]

I am new to all these stuff. I just write the javascript codes to draw charts with highcharts. So if jquery does not work on IE, is there a way to make it work in IE?Such as being able to write that code in javascript?