title: Change highlight behavior in Highcharts
body: <p>I am trying to make a web page that displays some data in a graph. For this I'm using the javascript library Highcharts.</p>
  
  <p>It's working quite well, but I want to change the highlight behaviour of the graph and I can't get it to stick so to speak. I found a code snippet that does that here: </p>
  
  <p><a href="https://highcharts.uservoice.com/forums/55896-general/suggestions/3166396-improve-series-highlight-on-legend-hover-event-by" rel="nofollow">https://highcharts.uservoice.com/forums/55896-general/suggestions/3166396-improve-series-highlight-on-legend-hover-event-by</a></p>
  
  <p>I can get that to work, but when I redraw the graph with new data, that behaviour is gone. 
  Some example code:</p>
  
  <pre><code>$(function () {
  var chart;
  $(document).ready(function() {
      chart = new Highcharts.Chart({
          chart: {
              renderTo: 'container',
              type: 'line',
              marginRight: 130,
              marginBottom: 25
          },
          legend: {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'top',
              x: -10,
              y: 100,
              borderWidth: 0
          },
          series: [{
              name: 'One',
              data: [[1,2.3],[2,6.7],[3,10],[4,2.5]]
          }, {
              name: 'Two',
              data: [[1,20],[2,10],[3,11],[4,12]]
          }, {
              name: 'Three',
              data: [[1,21],[2,23],[3,10],[4,4]]
          }, {
              name: 'Four',
              data: [[1,12],[2,2],[3,4],[4,6]]
          }]
      },
      function(chart){
          $(chart.series).each(function(i, serie){
              $(serie.legendItem.element).hover(function(){
                  highlight(chart.series, serie.index, true);
              }, function(){
                  highlight(chart.series, serie.index, false);
              });
          });
  
          function highlight(series, index, hide) {
              $(series).each(function (i, serie) {
                  if(i != index) {
                      $.each(serie.data, function (k, data) {
                          if(data.series) {
                              data.series.graph &amp;&amp; data.series.graph.attr("stroke", (hide ? "#D4D4D4": serie.color));
                              data.series.markerGroup &amp;&amp; data.series.markerGroup.attr("visibility", (hide ? "hidden": "visible"));
                          }
                      });
  
                  } else {
                      serie.group.toFront();
                      $.each(serie.data, function (k, data) {
                          if(data.series) {
                              data.series.graph &amp;&amp; data.series.graph.attr("stroke", serie.color);
                          }
                      });
                  }
              });
          }
      });
  });
  
  var new_series = [{
              name: 'One_2',
              data: [[1,3.3],[2,4.7],[3,20],[4,6]]
          }, {
              name: 'Two_2',
              data: [[1,20],[2,0],[3,10],[4,5]]
          }, {
              name: 'Three_2',
              data: [[1,21],[2,5],[3,10],[4,12]]
          }, {
              name: 'Four_2',
              data: [[1,12],[2,15],[3,20],[4,12]]
          }]
  
  $('#redraw').click(function() {
      while(chart.series.length &gt; 0)
          chart.series[0].remove(true);
  
      for (var i = 0; i &lt; new_series.length; i++){
          chart.addSeries(new_series[i],false);
      }
  
      chart.redraw();
  });
  </code></pre>
  
  <p>});</p>
  
  <p>Here's a fiddle that shows my problem: <a href="http://jsfiddle.net/qpByN/34/" rel="nofollow">http://jsfiddle.net/qpByN/34/</a></p>
  
  <p>When clicking redraw the highlighting behaviour is back to normal. How do I make it stick?</p>
  
  <p>I'm very much a javascript newbie, so I know there's a lot I'm missing about things work, but working with it is the best way to learn. This particular problem I haven't been able to solve though, and it might very well be because I don't know the terms to search for, so I'm asking how to do it here.</p>