Geek asks and answers

Formatting Highchart / Stock formatting for both series and flags

In the following example, how can a tooltip be formatted for both AND series flags?

http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/flags/

I want to show additional information in the form of a tooltip and other data in the flag tooltip.

+5
source share
3 answers

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 can take one more step and specify the names of your flags, and then check if the dot has a name (and not only it exists) to prevent non-flag dots from getting the same format.

, , http://jsfiddle.net/aTcFe/

+8

-

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

. JSFiddle: http://jsfiddle.net/aTcFe/

+11

With Highstock 2.1.7 you always get an object this.point, so you should use it this.series.type === 'flags'to determine if flags are present or not.

Example:

formatter: function () {
     if (this.series.type === 'flags') {
          // Flags formatting
     }
     else {
          // Default formatting
     }
}
+1
source

More articles:


All Articles