I have a stacked bar chart, with a shared tooltip, and I am trying to pull the stack total into the tooltip via the footerFormat property.

I thought this would be a simple property I could access, but I have not found an option for it that works.

Am I missing something obvious, or do I have to do this in a more complicated manner?

(if I've missed a duplicate of this question, please let me know, I was not able to find the specific circumstance I am looking to accomplish discussed)

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: /

I have a stacked bar chart, with a shared tooltip, and I am trying to pull the stack total into the tooltip via the footerFormat property.

I thought this would be a simple property I could access, but I have not found an option for it that works.

Am I missing something obvious, or do I have to do this in a more complicated manner?

(if I've missed a duplicate of this question, please let me know, I was not able to find the specific circumstance I am looking to accomplish discussed)

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/

• javascript
• jquery
• highcharts

• You mean something like this: jsfiddle.net/robertrozas/AeLFZ/9 – Hackerman Commented Jun 24, 2014 at 15:48
• Something like that, but I need to retain the 'shared:true' and the 'useHTML:true', and I need it to be part of the footerFormat rather than the pointFormat. – jlbriggs Commented Jun 24, 2014 at 16:09
• 1 Another solution: jsfiddle.net/robertrozas/AeLFZ/11 – Hackerman Commented Jun 24, 2014 at 16:35

2 Answers 2

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

If you want to have a table with each point using shared:true you need to use the formatter function like this:

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/

Here is my approach using footerFormat and its 100% working

tooltip: {
     shared: true,
     headerFormat: '<b>Week {point.x}</b><br>',
     pointFormat: '<b>{series.name}:</b> {point.y} ( {point.percentage:.0f}% )<br>',
     footerFormat: '<b>Total:  {point.total} </b>'
},