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

<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

Answer 2

You may use:

> $.each(this.points, function () {
>   s += '<br/><span style="color:' + this.series.color + '">\u25CF</span>' + this.series.name + ': ' + '<b>' + this.y + '</b>';
> });

Answer 3

If you want the main part of the tooltip look the same, and just the x-value to be formatted differently, you can use the headerFormat property instead and use point.key rather than this.x. This will accomplish the same thing without having to reproduce the series body.

tooltip: {
    headerFormat: '<b>{point.key}</b><br/>'
}

Answer 4

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
},