title: Highcharts - change series color on MouseOver
body: <p>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. </p>
  
  <p>I want all series lines to be grey and one mouseOver of the line, "turn on" their color, on mouseout revert back to grey. </p>
  
  <p>Ive got this partially working <a href="http://jsfiddle.net/matthewnye/f3Wq2/3/" rel="nofollow">here</a> however there are some obvious issues:</p>
  
  <ol>
  <li><p>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?</p>
  
  <pre><code> 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');
                  }
              }
          }
  }    
  </code></pre></li>
  <li><p>Mouseout isnt triggered until the cursor leaves the chart area. How do I track mouse events more precisely for series lines?</p></li>
  </ol>
  
  <p>Any improvement to my current code is highly appreciated.</p>