Highchart total in tooltip
I am using this code to display a generic prompt:
tooltip: {
crosshairs: true,
shared: true,
headerFormat: 'KW {point.key}<table>',
pointFormat: '<tr><td style=\"color: {series.color}\">{series.name}: <b></td><td>{point.y} USD</b></td></tr>',
useHTML: true,
footerFormat: '</table>',
valueDecimals: 2
},
Now I like to add all point.y values as the total point value. But how can I loop the .y point of each series to calculate the total?
+3
source to share
3 answers
Exceptionally, see example: http://jsfiddle.net/65bpvudh/7/
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +'</b>',
sum = 0;
$.each(this.points, function(i, point) {
s += '<br/>'+ point.series.name +': '+
point.y +'m';
sum += point.y;
});
s += '<br/>Sum: '+sum
return s;
},
shared: true
},
+11
source to share
The simplest is to use the common point property:
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +'</b>';
$.each(this.points, function(i, point) {
s += '<br/>'+ point.series.name +': '+ point.y;
});
s += '<br/>Total: '+ this.points[0].total
return s;
},
shared: true
},
Check the link
+3
source to share
Use property footerFormat
(since 2.2) with {point.total}
to easily show the total without having to override the full formatter
function:
tooltip: {
footerFormat: 'Sum: <b>{point.total}</b>',
shared: true,
},
+2
source to share