title: How to use an html method of affecting the legend - highcharts / highslide
body: <p>I would like to use html in the body of the page to be able to affect the filters of the chart. My chart  legend is modified slightly to be able to handle the filtering in a different way (inverted), so I would like this behaviour to stay intact. </p>
  
  <p>I found an example that did this...</p>
  
  <pre><code>function(chart){
      $(chart.series).each(function(i, serie){
          $('&lt;li id="legendlinkstyle" style="color: '+serie.color+'"&gt;'+serie.name+'&lt;/li&gt;').click(function(){
              serie.visible ? serie.hide() : serie.show();
          }).appendTo('#legend')
      })
  }
  </code></pre>
  
  <p>but it does not allow me to edit the text of the links, nor do things like affect the hover color, etc which I would like to do. In addition, I would like the flexibility to do things like add headers for each category of filter names like the below picture.</p>
  
  <p><img src="https://i.stack.imgur.com/hOZlN.png" alt="enter image description here"></p>
  
  <p>Is there a way to do add something in the javascript, and then somehow in the html body to do something like this.... (when you click it, it toggles a filter in the legend)</p>
  
  <pre><code>&lt;a href="functionhere();"&gt;CUSTOMIZE&lt;/a&gt;
  </code></pre>