title: How to use the tooltip formatter and still display chart color (like it does by default)?
body: <p>If I'm using the default Highcharts tooltip, it displays a circle the color of the chart data (the light/dark blue circles at <a href="http://jsfiddle.net/WOUNDEDStevenJones/mpMvk/1/">http://jsfiddle.net/WOUNDEDStevenJones/mpMvk/1/</a>):</p>
  
  <p><a href="https://i.stack.imgur.com/KifK6.jpg"><img src="https://i.stack.imgur.com/KifK6.jpg" alt="tooltip with colored dots"></a></p>
  
  <p>But if you use custom formatting on the tooltip (<a href="http://jsfiddle.net/WOUNDEDStevenJones/4vd7J/">http://jsfiddle.net/WOUNDEDStevenJones/4vd7J/</a>), the colors don't appear:</p>
  
  <p><a href="https://i.stack.imgur.com/uPNBg.jpg"><img src="https://i.stack.imgur.com/uPNBg.jpg" alt="customized tooltip without dots"></a></p>
  
  <p>How do you get/use that color in a custom formatted tooltip?  From what I can tell, there's nothing in their documentation (<a href="http://api.highcharts.com/highcharts#tooltip.formatter">http://api.highcharts.com/highcharts#tooltip.formatter</a>) explaining how to use this in a custom formatted tooltip.</p>
  
  <p>This displays the data colors in the tooltip by default:</p>
  
  <pre><code>tooltip: {
      shared: true
  }
  </code></pre>
  
  <p>But this does not:</p>
  
  <pre><code>tooltip: {
      formatter: function() {
          var s = '&lt;b&gt;'+ this.x +'&lt;/b&gt;';
  
          $.each(this.points, function(i, point) {
              s += '&lt;br/&gt;'+ point.series.name +': '+
                      point.y +'m';
          });
  
          return s;
      },
      shared: true
  },
  </code></pre>