HighCharts : Shared Tooltip with shared Data LABELS (in Series) - highcharts

Question

I have a simple HighChart here ----> jsFiddle
By having a Serie like this:
series: [{
name: 'Cities',
data: [
["Paris", 29.9],
["London", 71.5],
["New York", 106.4]
]
},
{
name: 'Universities',
data: [
["Cambridge", 17.5],
["Oxford", 1.5],
["MIT", 16.4]
]
}
]
There a shared Tooltip (a hover tooltip to display both series information in a single box) can only display the TOP NAME of the Series. Instead,
I want the respective CITY name and UNIVERSITY name in the TOOLTIP box.
For example, it should show:
----------------------
| • Paris: 29.9 |
| • Cambridge: 17.5 |
----------------------
Or, at least it should show:
------------------------------------
| • Cities: 29.9 (Paris) |
| • Universities: 17.5 (Cambridge) |
------------------------------------
Some thing like that.
(But now it is just showing the Serie Name)
How to do it please?

Answer 1

You can use the formatter function of tooltip for this.
http://api.highcharts.com/highcharts#tooltip.formatter
Demo: http://jsfiddle.net/robschmuecker/qSfJw/2/
$(function () {
$('#container').highcharts({
tooltip: {
shared: true,
formatter: function () {
console.log(this.points);
return this.points[0].key + ' : ' + this.points[0].y + '<br/>' + this.points[1].key + ' : ' + this.points[1].y;
}
},
series: [{
name: 'Cities',
data: [
["Paris", 29.9],
["London", 71.5],
["New York", 106.4]
]
}, {
name: 'Universities',
data: [
["Cambridge", 17.5],
["Oxford", 1.5],
["MIT", 16.4]
]
}]
});
});