CODEWITHSUNDEEP
highchartslinechart
Matt
Matt

Reputation: 53

Highcharts - change series color on MouseOver

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.

Upvotes: 2

Views: 5306

Answers (2)

jlbriggs
jlbriggs

Reputation: 17791

I believe this example may be the solution for the mouseout issue:

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-events-mouseover-no-sticky/

This paramter may be what you need:

stickyTracking: false,

And in the docs:

http://api.highcharts.com/highcharts#plotOptions.series.events.mouseOut

Upvotes: 0

jlbriggs
jlbriggs

Reputation: 17791

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/

Upvotes: 1

Related Questions