title: Pie Chart Custom Legend
body: <p>I am using highcharts to build a Pie chart, I am hiding the default legend that comes with highcharts and making my own. I am able to build one for line graphs, but when I do it for a pie chart, I can not get <code>show()/hide()</code> methods of the data to work because they are all in the same series.</p>
  
  <p>How can I get <code>show()/hide()</code> to work on a pie chart?</p>
  
  <pre><code>var chart = $('#chartdiv').highcharts();
  $(".legend div").html("");
  $(chart.series).each(function(seriesKey, series){
      $(series.data).each(function(k, v){
          var color = v.color;
          var name = v.name;
          var total = v.options.y;
          var activeStatus = v.visible ? "active" : "inactive";
          var item = $("&lt;div data-color=\""+color+"\" data-series=\""+k+"\" class=\""+activeStatus+"\"&gt;&lt;p&gt;"+name+"&lt;/p&gt;&lt;p&gt;"+total+"&lt;/p&gt;&lt;/div&gt;");
          $(".legend &gt; div").append(item);
          if(item.hasClass("active")){
              item.css("border-bottom", "solid 3px " + color);
          }
          item.on("mouseover mouseleave click", function(e){
              if(e.type === "mouseover"){
                  $(this).css("border-bottom", "solid 3px " + color);
              }else if(e.type === "mouseleave"){
                  if($(this).hasClass("active")){
                      $(this).css("border-bottom", "solid 3px " + color);
                  }else{
                      $(this).css("border-bottom", "solid 3px #dddddd");
                  }
              }else if(e.type === "click"){
                  $(this).removeClass("active inactive");
                  if(v.visible){
                      $(this).addClass("inactive");
                      v.hide();
                  }else{
                      $(this).addClass("active");
                      v.show();
                  }
              }
          });
      });
  });
  </code></pre>