How to use the tooltip formatter and still display chart color (like it does by default)?

Question

If I'm using the default Highcharts tooltip, it displays a circle the color of the chart data (the light/dark blue circles at http://jsfiddle.net/WOUNDEDStevenJones/mpMvk/1/):

But if you use custom formatting on the tooltip (http://jsfiddle.net/WOUNDEDStevenJones/4vd7J/), the colors don't appear:

How do you get/use that color in a custom formatted tooltip? From what I can tell, there's nothing in their documentation (http://api.highcharts.com/highcharts#tooltip.formatter) explaining how to use this in a custom formatted tooltip.

This displays the data colors in the tooltip by default:

tooltip: {     shared: true } 

But this does not:

tooltip: {     formatter: function() {         var s = '<b>'+ this.x +'</b>';          $.each(this.points, function(i, point) {             s += '<br/>'+ point.series.name +': '+                     point.y +'m';         });          return s;     },     shared: true }, 

Answer 1

I found the documentation for this (http://api.highcharts.com/highcharts#tooltip.pointFormat). The HTML they're using is located under pointFormat, not formatter:

<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/> 

Here's the updated code to use to get the colored circles in the tooltip:

tooltip: {     formatter: function() {         var s = '<b>'+ this.x +'</b>';          $.each(this.points, function(i, point) {             s += '<br/><span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': ' + point.y;         });          return s;     },     shared: true }, 

Answer 2

Improving upon WOUNDEDStevenJones answer, but with a non-jQuery specific solution:

To imitate the following HTML in pointFormat (http://api.highcharts.com/highcharts#tooltip.pointFormat):

<span style="color:{series.color}">\u25CF</span> 

I created this non-jQuery reliant code for a tooltip formatter function:

formatter: function() {     /* Build the 'header'.  Note that you can wrap this.x in something      * like Highcharts.dateFormat('%A, %b %e, %H:%M:%S', this.x)      * if you are dealing with a time series to display a more       * prettily-formatted date value.      */     var s = '<span style="font-size: 10px">' + this.x + '</span><br/>';      for ( var i = 0; i < this.points.length; i++ ) {          var myPoint = this.points[i];         s += '<br/><span style="color:'               + myPoint.series.color              + '">\u25CF</span>'              + myPoint.series.name + ': ';          /* Need to check whether or not we are dealing with an           * area range plot and display a range if we are          */         if ( myPoint.point.low && myPoint.point.high ) {              s += myPoint.point.low + ' - ' + myPoint.point.high;          } else {              s += myPoint.y;          }     }      return s; }, shared: true