score:11

Accepted answer

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/

score:6

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>'
},

enter image description here


Related Query

More Query from same tag