title: Turn long list of items in Highcharts legend into dropdown
body: <p>I <a href="http://geodata.grid.unep.ch/extras/arctic_sea_ice_graph.php" rel="noreferrer">have a graph</a> with some 40 items as separate lines. Now, I need to add the functionality of turning on/off or highlighting any of these via legend/menu/dropdown list. </p>
  
  <p>Normally, when the legend is turned on, I can click on any item and turn it on/off there. However, the very long legend really skews (the beauty of) my graph. Is there any way to achieve the same thing (turning on/off) with a drop-down menu? That could be visually much more attractive.</p>
  
  <p>Otherwise, last resort, a simple button "turn on/off" legend need to suffice then (like <a href="http://jsfiddle.net/sbochan/3Bh7b/1/" rel="noreferrer">this example</a>, although the "turn on" doesn't work).</p>
  
  <p><img src="https://i.stack.imgur.com/KWcEm.png" alt="Highcharts graph with long legend"></p>
  
  <pre><code>// turn legend on/off with HTML button
  function(chart){
      $('#updateLegend').click(function (e) {
          var legend = chart.legend; 
  
          if(legend.display) {
              legend.group.hide();
              legend.box.hide();
              legend.display = false;
          } else {
  
              legend.group.show();
              legend.box.show();
              legend.display = true;
          }
      });
  }
  </code></pre>