score:43

Accepted answer

if you want to pass additional data for a point other than the x and y values, then you have to name that value. in the following example i add the following three additional values to each data point:

{
  y: 3,
  locked: 1,
  unlocked: 1,
  potential: 1,
}

then to access and display those values in the tooltip i use the following:

tooltip: 
{
     formatter: function() { return ' ' +
        'locked: ' + this.point.locked + '<br />' +
        'unlocked: ' + this.point.unlocked + '<br />' +
        'potential: ' + this.point.potential;
     }
}

score:4

what i have tried is concatenating series name with x-axis and y-axis value and it works fine for me. what issue you are facing?

tooltip: { formatter: function () { return this.x + ': ' + this.series.name + ': ' + this.y; } }

score:5

i figured it out, i pass 3 values in the data array

indice.push([(new date(value.x)).gettime(), val_change[0], val_change[1]]);

series: [{ type: 'area', name: titleindice, data: indice, showinlegend : false //disable the the show/hide icon }]

and in the tooltip

tooltip:
                {
                    usehtml: true,
                    formatter: function()
                    {
                        var color = "";

                        return highcharts.dateformat('%h:%m:%s', this.x) + this.y +  this.point.config[2] ;

                    }
                },

score:5

two ways.

1

series: [
          { ...
            tooltip:
              {pointformat: "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y} {y2}</b><br/>"}
          }, ...          
         ]
o = highcharts.point.prototype.tooltipformatter
highcharts.point.prototype.tooltipformatter=function(format){return o.call(this, format).replace("{y2}", this.config[2]);}

2

 a = new highcharts.stockchart(options); 
 a.series[0].tooltipformatter = function(item) { return "<span style=\"color:{" + item.series.color+"\">" +item.series.name+"</span>: <b>"+item.y+item.point.config[2]+"</b><br/>"; }

score:7

if you, in a multi series highstocks chart, want to display series specific data in the tooltip you could do something like this.

var series = [];

// populate our series
series.push({
  name: "small_cities",
  displayname: "small cities",
  color: "#123456",
  data: [...]
});
series.push({
  name: "countries",
  displayname: "countries",
  color: "#987654",
  data: [...]
});

chart: {
  ...

  tooltip: {
    formatter: function() {
      var s = '';
      $.each(this.points, function(i, point) {
        s += '<br /><span style="color:' + this.series.color + '">' +
             point.series.useroptions.displayname + '</span>: ' + point.y;
      });
      return s;
    }
  },

  ...
}

now you'll see nice series names "small cities" instead of the series.name (small_cities). all attributes you set on the series can be found in this.points[].series.useroptions. for more formatter options take a look at the highstocks docs.


Related Query

More Query from same tag