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
                tooltip+='<tr><th style="color: '+point.series.color+'">'': </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>'
            return tooltip;


Here is my approach using footerFormat and its 100% working

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

enter image description here

Related Query

More Query from same tag