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

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

You may try this -

tooltip: {
  formatter() {
    const tooltipTemp = '<span style="font-size: 10px">' + this.x +
      '</span><br/><span style="color:' + this.point.color +
      '">●</span> ' + this.series.name +
      ': <b>' + this.point.y + '</b><br/>';
    return tooltipTemp;
  }
}

For me output of this piece code looks similar like default template. Hope this will help others :)

Answer 5

You may use:

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