Highcharts 'this' returning the same object twice

Question

I am simply trying to use the tooltip pointFormatter in Highcharts to return this.name (at least for now, I have some formatting to do after that). The problem I have is that this.point is returning the same object twice - it is the correct object, but it means that it is being displayed twice in my tooltip.

Here is a JSFiddle showing the issue, with the tooltip starting on line 242.

This is the code I have used:

tooltip: {
  pointFormatter: function(){
    var point = this.name;
    console.log(point);
    return point;
  },
  followPointer: true
}

Logging to the console confirms the fact that objects are being returned twice.

Any help would be much appreciated as I can't seem to find what could be causing the issue.

Thanks!

Answer 1

The problem is the pointer over multiple elements. So your code works good, but there are a lot of overlay, that's why it repeat multiple point name. Declare a var tmpPoint in:

$(function () {
var tmpPoint;

and than:

tooltip: {
            pointFormatter: function(){
            var point = this.name;
            if (tmpPoint!=point){
              tmpPoint=point;
              console.log('bb'+point);
              return point;
            }
          },
          followPointer: true
        },

Answer 2

The pointFormatter ( API ) only modifies the body of the tooltip, so currently your body is returning the exact same thing as the header. Two reasonable options:

• You can edit the title of the tooltip using headerFormat ( API ) to differentiate them.

• You can alter the entire tooltip to your liking using the formatter ( API ) function.

Note that the formatter does not exist under plotOptions , where you code currently resides. It is only available through the root tooltip .