Highcharts - change series color on MouseOver

2
votes

I know this question has been asked before and I have used heavily a lot of the answers provided by others but am still not 100% the way there.

I want all series lines to be grey and one mouseOver of the line, "turn on" their color, on mouseout revert back to grey.

Ive got this partially working here however there are some obvious issues:

  1. I know, Ive hardcoded the series array position. I couldnt figure out how to determine what series the mouse was on. Whats the best way to do this?

     plotOptions: {
        series: {
            events: {
                mouseOver: function() {chart.series[0].graph.attr('stroke', '#0000FF');
                    $report.html('Moused over')
                    .css('color', 'green');
                },
                mouseOut: function() {chart.series[0].graph.attr('stroke', '#C0C0C0');
                    $report.html('Moused out')
                    .css('color', 'red');
                }
            }
        }
}

  2. Mouseout isnt triggered until the cursor leaves the chart area. How do I track mouse events more precisely for series lines?

Any improvement to my current code is highly appreciated.

2
highchartslinechart

2 Answers

1
votes

You can use:

 this.graph.attr('stroke', '#0000FF');

instead of hard coding a series: http://jsfiddle.net/jlbriggs/f3Wq2/5/

I had something similar going a while back, using checkboxes rather than mouseover events. Just in case there's anything in it that's helpful: http://jsfiddle.net/jlbriggs/57SR9/21/