title: highchart customize legend
body: <p>I will like to custom the legend of highchart, to achieve:</p>
  
  <ol>
  <li>There will be dots instead of lines</li>
  <li>The color of the dots and the color of the legend text will be equal to this.color</li>
  <li>on invisible status (onclick legend) I will like to change the color to the default option of highchart (gray)</li>
  </ol>
  
  <p>This is what I have so far:
  <img src="https://i.stack.imgur.com/AKYA7.png" alt="enter image description here"></p>
  
  <p>what I did:</p>
  
  <pre><code>legend: {
      useHTML: true,
      symbolWidth: 0,
      lableFormat: '&lt;div&gt;' +
                      '&lt;div style="border-radius:50%; width: 10px; height:10px: background-color:{color}; display: inline-block; margin-right:5px"&gt; &lt;/div&gt;' +
                      "&lt;span style='color:{color};font-family:proximaNovaBold'&gt; {name} &lt;/span&gt;"
                   '&lt;div&gt;',
  }
  </code></pre>
  
  <p>what I am missing:
  - on click, the legend doesn't change his color to default gray color</p>
  
  <p>I was looking for something like legend-labelFormat for invisible status, but I didn't find it in the docs of highchart (really good by the way), is there any other way to accomplish this?</p>