fix height of column in stacked percentage column highcharts

Question

I have a stacked percent column chart in this example. http://jsfiddle.net/sqgq88rd/5/. I don't want when I click on legend it the column always becomes 100% so I used stacking : 'stacked' and I want column "Total" always becomes 100%, column "part1" and column "part2" use their percent. I fixed max of yAxis was 100, but height of columns wasn't equal. I try this code .

$(function () {
$('#container').highcharts({
    chart: {
        type: 'column',options3d: {
            enabled: true,
            alpha: 5,
            depth: 100
        },
    },
    title: {
            useHTML: true,
        text: 'Stacked column chart',
        x:-20
    },
    subtitle: {
        useHTML: true,
        text: '',
        x: -20
    },
    xAxis: {
        categories : [ 'CPC','QBPC','QTPC','TTHPC','DNPC','QNAPC','QNPC','BDPC','PYPC','KHPC','GLPC','KTPC','DLPC','DNoPC','CGC','NPMU ','CREB ','PEC ','IT','EMEC ','ETC ','PC3I','CC' ]
    },
    yAxis: {
        min: 0,
        max: 100,
        title: {
            text: ''
        },
        stackLabels: {
            enabled: false,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    tooltip :  {
        headerFormat: '<b>{point.x}<b><br/>',
        pointFormat: '{series.name}: <b>{point.tyle}</b><br/>Tỷ lệ: <b>({point.y:.0f}%)<b/>'

      },
    plotOptions: {
      column: {
        stacking: 'stacked'
      },
      series: {
        dataLabels: {
          enabled: true,
          inside: true,
          allowOverlap: true,
          color: '#1C689D',
          style: {
            fontWeight: 'bold'
          },
          formatter: function() {
            return this.point.tyle
          }
        }
      }

    },
    series: [
    {
          name: 'Total',
          data: [{y:100,tyle:3080},{y:100,tyle:527},{y:100,tyle:743},{y:100,tyle:662},{y:100,tyle:1860},{y:100,tyle:1160},{y:100,tyle:946},{y:100,tyle:944},{y:100,tyle:650},{y:100,tyle:1095},{y:100,tyle:650},{y:100,tyle:474},{y:100,tyle:890},{y:100,tyle:1149},{y:100,tyle:1755},{y:100,tyle:640},{y:100,tyle:689},{y:100,tyle:345},{y:100,tyle:176},{y:100,tyle:133},{y:100,tyle:467},{y:100,tyle:266},{y:100,tyle:108}],
          index:1
      },{
          name: 'Part 1',
          data: [{y:6,tyle:179},{y:3,tyle:17},{y:6,tyle:42},{y:1,tyle:9},{y:1,tyle:12},{y:3,tyle:40},{y:1,tyle:13},{y:2,tyle:17},{y:2,tyle:10},{y:4,tyle:46},{y:7,tyle:45},{y:3,tyle:12},{y:5,tyle:47},{y:4,tyle:41},{y:2,tyle:29},{y:3,tyle:16},{y:0,tyle:3},{y:10,tyle:33},{y:5,tyle:8},{y:3,tyle:4},{y:11,tyle:52},{y:0,tyle:0},{y:0,tyle:0}],
          index:2
      },
      {
          name: 'Part 2',
          data: [{y:2,tyle:50},{y:1,tyle:7},{y:2,tyle:18},{y:0,tyle:3},{y:0,tyle:2},{y:1,tyle:14},{y:0,tyle:2},{y:0,tyle:2},{y:1,tyle:5},{y:2,tyle:25},{y:4,tyle:23},{y:0,tyle:1},{y:3,tyle:23},{y:2,tyle:23},{y:1,tyle:15},{y:2,tyle:12},{y:0,tyle:0},{y:4,tyle:15},{y:1,tyle:1},{y:0,tyle:0},{y:9,tyle:26},{y:0,tyle:0},{y:0,tyle:0}],
          index:2
      }
    ]
});

});

How can I fix height of columns is equal and equal 100;

Answer 1

Right now, you are setting your total as 100, and then your other two series as their values, and stacking them all together.

So, your first point, you 100, plus 6, plus 2, for a total of 108. And so on, for each point, which makes them all different heights.

You need to subtract the values of 'Part 1' and 'Part 2' from your 'Total' series.

Example:

$.each(totalData, function(i, point) {
  totalData[i].y = (totalData[i].y - part1Data[i].y - part2Data[i].y);
})

Updated fiddle:

• http://jsfiddle.net/sqgq88rd/7/

Output:

Answer 2

You can use stacking: 'percent'

Api reference: http://api.highcharts.com/highcharts/plotOptions.column.stacking

Example code: http://jsfiddle.net/6my8pghf/

Regards.