Grand Totals at HighCharts Pie Chart Legend

Question

Is there a way to get a great amount at the end of a column of values ​​in my legend? Here is the code for my legend right here, as well as the fiddle in which it is split into two columns for the name and value of the dataset [].

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 as a column to be something like this

 Data1 2 Data2 3 Data3 2 --- 7 

What I need to do is add a dashed or preferred solid line below this line and then the total amount of all data values. Here is my real violin.

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

Thank you!

Answer 1

You can hack this by adding the final value to the last element of the legend.

 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 is here .

Answer 2

I would actually add the total as another record in the dataset with a null value and label attribute. Something like that:

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

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