Highcharts: grouped columns with percentages

Question

My question is similar to this one or this one, except that I don't have a simple series but groups of data.

Basically, I just want to have a chart with the behaviour of a "stacked percentage columns" chart, but without stacking the column.

Here is an example with absolute values (fiddle) :

var data = [
{
    name : 'A',
    data : [72, 50, 52]
},
{
    name : 'B',
    data : [23, 41, 12]
},
{
    name : 'C',
    data : [18, 9, 11]
},
{
    name : 'D',
    data : [89, 46, 54]
}];


// CHART

$('#container').highcharts(
{
    chart :
    {
        type : 'column'
    },
    xAxis :
    {
        categories : ['Group 1', 'Group 2', 'Group 3']
    },
    yAxis :
    {
        title :
        {
            text : null
        }
    },
    tooltip :
    {
        shared: true
    },
    plotOptions :
    {
        column :
        {
            dataLabels :
            {
                enabled : true
            }
        }
    },
    title :
    {
        text : 'Example'
    },
    series : data
});

In this example, I have three groups ("Group 1", "Group 2" and "Group 3") and four data ("A", "B", "C" and "D").

I would like to display the percentage of "A", "B", "C" and "D" for each group, and also I would like that percentage to be updated when I click on an item of the legend to hide/show a data (just like it works with stacked columns). Actually it's all like a "stacked percentage columns" chart, except that I don't want to stack the columns...

In my example, for "Group 1" I would have in percentages: A=36%, B=11%, C=9%, D=44%. After hiding A, I would like the percentages to be updated without counting A, giving in that case: B=18%, C=14%, D=68%. — nunivek, Mar 21 '14 at 14:15
So you need to catch legendItemClick event http://api.highcharts.com/highcharts#plotOptions.series.events.legendItemClick and calcualte eah value then update it by point.update() function http://api.highcharts.com/highcharts#Point.update — Sebastian Bochan, Mar 25 '14 at 12:01
Okay, thank you Sebastian for your answer. I was hoping there would be a built-in solution for this in Highcharts, but I will do as you suggest. Anyway, that would be great to be able to use the "percent" property for charts that are not stacked... — nunivek, Mar 27 '14 at 08:26
You can post your suggeston on our website http://highcharts.uservoice.com — Sebastian Bochan, Mar 27 '14 at 10:44

TechnoCrat · Accepted Answer · 2015-03-06T07:36:19.593

Hi Checkout example here to resolve you issue.

http://jsfiddle.net/Evsw4/63/.

you can use formatter function to format the data label. Note that if a format is defined, the format takes precedence and the formatter is ignored.

API Ref : http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter

Code for formatter function to display percentage along with considering Group.

            dataLabels: {
                enabled: true,
                formatter: function () {
                    var mychart = $('#container').highcharts();
                    var mytotal = 0;

                    for (i = 0; i < mychart.series.length; i++) {
                        if (mychart.series[i].visible) {
                            mytotal += parseInt(mychart.series[i].yData[0]);
                        }
                    }
                    var pcnt = (this.y / mytotal) * 100;
                    return Highcharts.numberFormat(pcnt) + '%';
                }
            }

Full code:

var data = [{
    name: 'A',
    data: [72, 50, 52]
}, {
    name: 'B',
    data: [23, 41, 12]
}, {
    name: 'C',
    data: [18, 9, 11]
}, {
    name: 'D',
    data: [89, 46, 54]
}];
$('#container').highcharts({
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Group 1', 'Group 2', 'Group 3']
    },
    yAxis: {
        title: {
            text: null
        }
    },
    tooltip: {
        shared: true
    },
    plotOptions: {
        column: {
            dataLabels: {
                enabled: true
            }
        },
        series: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    var mychart = $('#container').highcharts();
                    var mytotal = 0;

                    for (i = 0; i < mychart.series.length; i++) {
                        if (mychart.series[i].visible) {
                            mytotal += parseInt(mychart.series[i].yData[0]);
                        }
                    }
                    var pcnt = (this.y / mytotal) * 100;
                    return Highcharts.numberFormat(pcnt) + '%';
                }
            }
        }
    },
    title: {
        text: 'Example'
    },
    series: data
});

Thank you TechnoCrat for your answer. It is indeed a good solution, and I think it is what I ended up doing one year ago, when I had the issue. I was just hoping for a built-in solution, without custom formatter, but there seemingly is none. — nunivek, Mar 04 '15 at 16:50
this chart also include combination of series and group so it is complex and probably not had any built-in solution, I checked it and ended up with it and developed using custom formatter. — TechnoCrat, Mar 04 '15 at 17:55

Highcharts: grouped columns with percentages

1 Answers1