I am trying to customize the tooltip in a highcharts bubble chart. Rather than having just the figures appear in the tooltip, I'd like to add context based on the x,y and z titles (ex, "50 fatalities, 100 injured, 150 total victims" instead of the current "(50,150) Size: 150" display). I'm able to make this happen in scatter plot charts using the following, but no dice in bubbles. Any ideas? Thanks. :)
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} fatalities, {point.y} injured, {point.z} total'
}
Hope I understand your question correctly, is this what you are looking for.
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy'
},
plotOptions: {
bubble: {
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} fatalities, {point.y} injured, {point.z} total'
}
}
},
title: {
text: 'Highcharts Bubbles'
},
series: [{
data: [
[97, 36, 79],
[94, 74, 60],
[68, 76, 58],
[64, 87, 56],
[68, 27, 73],
[74, 99, 42],
[7, 93, 87],
[51, 69, 40],
[38, 23, 33],
[57, 86, 31]
]
}, {
data: [
[25, 10, 87],
[2, 75, 59],
[11, 54, 8],
[86, 55, 93],
[5, 3, 58],
[90, 63, 44],
[91, 33, 17],
[97, 3, 56],
[15, 67, 48],
[54, 25, 81]
]
}, {
data: [
[47, 47, 21],
[20, 12, 4],
[6, 76, 91],
[38, 30, 60],
[57, 98, 64],
[61, 17, 80],
[83, 60, 13],
[67, 78, 75],
[64, 12, 10],
[30, 77, 82]
]
}]
});
});