javascript - Highcharts: grouped columns with percentages -

my question similar this one or this one, except don't have simple series groups of data.

basically, want have chart behaviour of "stacked percentage columns" chart, without stacking column.

here example 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 example, have 3 groups ("group 1", "group 2" , "group 3") , 4 data ("a", "b", "c" , "d").

i display percentage of "a", "b", "c" , "d" each group, , percentage updated when click on item of legend hide/show data (just works stacked columns). it's "stacked percentage columns" chart, except don't want stack columns...

hi checkout example here resolve issue.

http://jsfiddle.net/evsw4/63/.

you can use formatter function format data label. note if format defined, format takes precedence , formatter ignored.

api ref : http://api.highcharts.com/highcharts#plotoptions.series.datalabels.formatter

code formatter function display percentage along considering group.

            datalabels: {                 enabled: true,                 formatter: function () {                     var mychart = $('#container').highcharts();                     var mytotal = 0;                      (i = 0; < 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;                      (i = 0; < 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 });