score:8

Accepted answer

one way is to create a tooltip formatter that checks if the current object is a point.

tooltip: {
            formatter: function(){
                if(this.point) {
                    return "this is a flag"
                }
                else {
                    return "this is a line"
                }
            }                
        }

you could go one step further and give your flags names and then check if the point has a name (instead of if it just exists) to prevent non-flag points from getting the same format.

here is your example modified to reflect the former http://jsfiddle.net/atcfe/

score:1

with highstock 2.1.7 you always get a this.point object, so you should use this.series.type === 'flags' to detect whether flags are present or not.

an example would be:

formatter: function () {
     if (this.series.type === 'flags') {
          // flags formatting
     }
     else {
          // default formatting
     }
}

score:11

use following function as tooltip formatter - 

tooltip: {
  shared:true,
formatter: function(){
        var p = '';
        console.log(this);

        if(this.point) {
          p += '<b>'+ highcharts.dateformat('%a, %b %e, %y', this.point.x) +'</b><br/>';
          p += this.point.config.text // this will add the text on the flags
        }
        else {              
          p += '<b>'+ highcharts.dateformat('%a, %b %e, %y', this.x) +'</b><br/>';
          $.each(this.points, function(i, series){
            p += '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>'+ this.y + ' kwh ($' + highcharts.numberformat(this.y * rate, 0) + ')</b><br/>';
          });

        }
        return p;
      }}

also refer to this jsfiddle : http://jsfiddle.net/atcfe/


Related Query

More Query from same tag