Grand Totals in HighCharts Pie Chart Legend

Question

Is there a way for me to get a grand total at the end of my value column in my legend? Here is the code for my legend right here as well as the fiddle wtih it broken into two columns for the name and value of the data[] set.

legend: {
            enabled: true,
            layout: 'vertical',
            align: 'right',
            width: 220,
            verticalAlign: 'top',
            borderWidth: 0,
            useHTML: true,
            labelFormatter: function() {
                return '<div style="width:200px"><span style="float:left">' + this.name + '</span><span style="float:right">' + this.y + '%</span></div>';
            },
            title: {
                text: 'Primary',
                style: {
                    fontWeight: 'bold'
                }
            }
        }

id like the column to be something like this

Data1      2
Data2      3
Data3      2
         ---
           7

What I need to be able to do is add the dashed or preferrably solid line underneath that row and then the grand total of all of the data values. Here is my current fiddle.

http://jsfiddle.net/hAnCr/29/

thank you!

Answer 1

You could hack this in by appending the total to the last legend item.

chart: {
  events: {
    load: function(event) {
      $('.highcharts-legend-item').last().append('<br/><div style="width:200px"><hr/> <span style="float:left"> Total </span><span style="float:right"> ' + total + '</span> </div>')
    }
  }
}

Fiddle here.

Answer 2

I would actually add the total as another entry in the data array, with a null value and a label attribute. Something like this:

legend: {
    labelFormatter: function() {
        return this.name + ': ' + this.y_label;
    },
},
// ...
series: [{
    type: 'pie',
    data: [
        {'name': 'Real Estate', 'y': 12.55, 'y_label': 12.55},
        // ...
        {'name': 'Total', 'y': null, 'y_label': 100, 'color': 'transparent'}
    ]
}]

Fiddle here: http://jsfiddle.net/Aeon/9cZKg/1/