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

Answer 1

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):

\u25CF

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 = '' + this.x + '
';

    for ( var i = 0; i < this.points.length; i++ ) {

        var myPoint = this.points[i];
        s += '
\u25CF'
             + 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