Improve series highlight on legend hover event (by dimming other series)
It would be useful if you could improve the series line highlight (or equivalent on other chart type) on legend hover event.
Following what is currently achieved on hover state by default, where it highlights the series line by adding line width, it should be possible to dim or gray out the other line series in the graph.
This can be easily done by using events on legend items hovering: http://jsfiddle.net/vitorbarbosa/qpByN/
however, it would be nice if it was implemented natively and for other chart types.
Vitor Barbosa
shared this idea
Here’s a plugin that works with columns as well: http://jsfiddle.net/highcharts/Ha3Wr/
It works by setting the opacity on the group element. I don’t expect it to work in legacy IE though.
-
@Anonymous The plugin works for all-line charts too: http://jsfiddle.net/Ha3Wr/57/
-
Anonymous
commented
Can someone help similar feature for mutli-line chart?
-
Anonymous
commented
Is this possible on custom legend which are in separate div outside the chart area ?
-
Arome Remix commented
can any one help me in sending it to GOOGLE.COM when i click a particular legend???
-
Kimberly Nguyen commented
Awesome Thanks!
-
Simon Goumaz
commented
The given plugin didn't work with legends that use HTML (`useHTML: true`). Here's an updated fiddle with the fix: http://jsfiddle.net/Ha3Wr/35/
-
@Ke Zhao I updated the plugin to work also with pies. Please reload the jsFiddle now.
-
Ke Zhao
commented
I think the pie should be add to an expection.
var series = this.chart.series,
element = item.legendGroup.element,
type = this.chart.userOptions.chart.type;if(type == 'pie'){
return;
} -
Here you go: http://jsfiddle.net/highcharts/Ha3Wr/13/
-
Jay McDaniel
commented
Thanks for you help Torstein. I tried putting that snippet in the usual place (where it worked for my line charts) in a few of my bar/column charts and it doesn't want to work (even in chrome and FF). Here's a fiddle: http://jsfiddle.net/Ha3Wr/7/ (the relevant bit is toward the bottom). If you don't mind looking at it. Thanks for your help.
-
Jay McDaniel
commented
This is great! Is there a way to modify Vitor's code so it works with column/bar charts? I tried changing "stroke" to "fill" but I guess I'm missing something. Thanks.
-
Jamie
commented
This would be a very useful feature.
It could be implemented as a 'dim' property, similar to the 'highlight' property.
Being able to set as a general percentage, or as a specific color would be very useful.For example, setting all other series to grey when highlighting one series is very handy.