ElementStacks

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>

JavaScript

/*
Data is:
                            Gross Amount    Cost Amount
Services       Australia    20              10              
               Germany      30              15
Manufacturing  Australia    35              17
               Germany      25              12

----

Would like to be able define my categories hierarchically - example:
xAxis: [{
  categories: [{
    name: 'Services'
    children: ['Australia', 'Germany']
  },{
    name: 'Manufacturing'
    children: ['Australia', 'Germany']
  }]
}]

and get a result similar to what is fudged up by using the renderer on the right.
*/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
    }, 
    xAxis: [{
        categories: ['Australia', 'Germany', 'Australia', 'Germany'],
        labels: {
            y: 40
        }
    }],
    legend: {
        margin: 40
    },
    
    series: [{
        name: 'Gross',
        data: [['Services', 20],['Services',30],['Manufacturing', 35],['Manufacturing', 25]]
    },{
        name: 'Cost',
        data: [['Services', 10],['Services',15],['Manufacturing', 17],['Manufacturing', 13]]
    }]
}, function(chart){
    $('.highcharts-axis:first > text').each(function() {
       this.setAttribute('y', parseInt(this.getAttribute('y')) - 20)
    });
    
    var text1 = chart.renderer.text("Services", 150, 340).add();
    var text2 = chart.renderer.text("Manufacturing", 350, 340).add();
});