Highcharts: show the total number of stacks in the general tooltip using the footerFormat property

Question

I have a summary histogram with a general hint, and I am trying to pull the total amount of the stack into the hint using the footerFormat property.

I thought it would be just a property that I could access, but I did not find an option for it that works.

Am I missing something obvious or do I need to do it in a more complex way?

(if I missed a duplicate of this question, please let me know, I could not find the specific circumstance that I am looking for for discussion)

code:

tooltip : { shared : true, useHTML : true, headerFormat : '<table class="tip"><caption>Group {point.key}</caption>' +'<tbody>', pointFormat : '<tr><th style="color: {series.color}">{series.name}: </th>' +'<td style="text-align: right">${point.y}</td></tr>', footerFormat : '<tr><th>Total: </th>' +'<td style="text-align:right"><b>${???}</b></td></tr>' +'</tbody></table>' } 

• Fiddle: http://jsfiddle.net/jlbriggs/AeLFZ/

Answer 1

footerFormat does not have access to ${point} . See footerFormat documentation .

If you want to have a table with each point using shared:true , you need to use the format function as follows:

 formatter: function() { var tooltip='<table class="tip"><caption>Group '+this.x+'</caption><tbody>'; //loop each point in this.points $.each(this.points,function(i,point){ tooltip+='<tr><th style="color: '+point.series.color+'">'+point.series.name+': </th>' + '<td style="text-align: right">'+point.y+'</td></tr>' }); tooltip+='<tr><th>Total: </th>' +'<td style="text-align:right"><b>'+this.points[0].total+'</b></td></tr>' +'</tbody></table>'; return tooltip; } 

http://jsfiddle.net/AeLFZ/10/