highcharts pass multiple values to tooltip

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.

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