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!

score 10 · Accepted Answer · answered Apr 26 '13 at 13:50

10

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

answered Apr 26 '13 at 13:50

Mark

106,305
20
172
230

Thank you very much! i'm just learning highcharts and the API is kind of lengthy so i haven't been able to figure this stuff out! – Nick G Apr 26 '13 at 14:09
Is there a reason i'd be receiving the error of SCRIPT438: Object doesn't support property or method 'last' when using chrome and/or IE 7,8,9,10. It works fine in the fiddle but doesn't work in my site itself. Odd, but again thank you this is certainly what i'm lookign for – Nick G Apr 26 '13 at 14:39
Hmm, not sure, what version of JQuery are you using? What is the error in Chrome? `Script438` is an IE thing and I don't trust IE to throw a meaningful error. – Mark Apr 26 '13 at 18:55
my reference was wrong earlier, i meant to mark your answer again i've been busy sorry abotu that, thanks for checking back in to help out! – Nick G Apr 26 '13 at 19:08
2

btw, it seems `useHTML: true,` in legend section is important for this solution – pupadupa Dec 15 '14 at 22:27
Why its `100.02` in Total...Fingers will arise on Highcharts if this inaccuracy will occur on Stock Exchange Charts...which mean .01 will be a great great value – Sudhanshu Saxena Jun 11 '15 at 07:08
@SudhanshuSaxena, [read this](http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html). – Mark Jun 11 '15 at 12:54

score 5 · Answer 2 · answered Jun 19 '13 at 19:10

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

example

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

Grand Totals in HighCharts Pie Chart Legend

2 Answers2

Linked