Grand Totals in HighCharts Pie Chart Legend

Nick G picture Nick G · Apr 26, 2013 · Viewed 11.4k times · Source

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

Mark picture Mark · Apr 26, 2013

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.

enter image description here