Total of values in HighCharts Pie Chart

Question

Is there a way to get a grand total of values in legend or any other place in pie charts? Here is the code with legend ,but instead of adding the total of percentage,i want to display the total of values..

$(function () {
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'pie',
            width: 500,
            borderWidth: 2
        },

        title: {
            text: 'demo'
        },

        credits: {
            enabled: false
        },

        legend: {

            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            y: 30,
            labelFormat: '{name} ({percentage:.1f}%)',
            navigation: {
                activeColor: '#3E576F',
                animation: true,
                arrowSize: 12,
                inactiveColor: '#CCC',
                style: {
                    fontWeight: 'bold',
                    color: '#333',
                    fontSize: '12px'    
                }
            }
        },
    tooltip: {
            formatter: function() {
                return Highcharts.numberFormat(this.percentage, 2) + '%<br />' + '<b>' + this.point.name + '</b><br />Rs.: ' + Highcharts.numberFormat(this.y, 2);
            }
        },
        series: [{
            data: (function () {
                var names = 'Ari,Bjartur,Bogi,Bragi,Dánjal,Dávur,Eli,Emil,Fróði,Hákun,Hanus,Hjalti,Ísakur,' +
                    'Johan,Jóhan,Julian,Kristian,Leon,Levi,Magnus,Martin,Mattias,Mikkjal,Nóa,Óli,Pauli,Petur,Rói,Sveinur,Teitur',
                    arr = [];

                Highcharts.each(names.split(','), function (name) {
                    arr.push({
                        name: name,
                        y: Math.round(Math.random() * 100)
                    });
                });

                return arr;
            }()),
            showInLegend: true
        }]

    });
});

I'm not sure I get this. The legend for Ari should be "Ari (57)"? — Halvor Holsten Strand, Aug 22 '14 at 18:04
legend can be in % but need to display the total value of all the slices somewhere on the chart — Mani, Aug 23 '14 at 03:17
possible duplicate of [Grand Totals in HighCharts Pie Chart Legend](http://stackoverflow.com/questions/16237810/grand-totals-in-highcharts-pie-chart-legend) — Mark, Aug 23 '14 at 16:27
in the above link by Mark total is of percent value,here i am trying to get total of the values and not their percentage. — Mani, Aug 23 '14 at 17:38

score 12 · Accepted Answer · answered Aug 24 '14 at 17:14

12

I would use the Renderer.text to annotate the chart (and not do it in the legend since you have so many data points).

chart: {
    events: {
        load: function(event) {
            var total = 0; // get total of data
            for (var i = 0, len = this.series[0].yData.length; i < len; i++) {
                total += this.series[0].yData[i];
            }
            var text = this.renderer.text(
                'Total: ' + total,
                this.plotLeft,
                this.plotTop - 20
            ).attr({
                zIndex: 5
            }).add() // write it to the upper left hand corner
        }
    }
},

Fiddle example.

enter image description here

answered Aug 24 '14 at 17:14

Mark

106,305
20
172
230

In this example, if I click a legend to disable it, total value is not updating to deduct that disabled item. How can we fix it? – Adnan May 11 '15 at 15:25
@Adnan, see this updated [example](http://jsfiddle.net/t13jymwk/27/) that hooks redraw event and updates the text. – Mark May 11 '15 at 15:50

score 6 · Answer 2 · answered Jun 10 '16 at 03:15

In addition to Mark's answer, to calculate the total, we do not need the for-loop statement. So, the code can be reduced.

chart: {
    events: {
        load: function(event) {
            var total = this.series[0].data[0].total;
            var text = this.renderer.text(
                'Total: ' + total,
                this.plotLeft,
                this.plotTop - 20
            ).attr({
                zIndex: 5
            }).add() // write it to the upper left hand corner
        }
    }
},

Total of values in HighCharts Pie Chart

2 Answers2