score:60

Accepted answer

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

score:0

You may use:

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

score:2

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

score: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/>'
}

score:8

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

Related Query

More Query from same tag