Grouped categories not working in javascript

See more:

Javascript

Hi, I have a highchart(in barchart format) in which I want to group the barcharts with a value(let say columnA), then further breakdown the barcharts with other values under columnA(e.g. columnB and columnC).
But I cant seems to get it right, the xAxis of the barcharts being displayed does not according to what I want. Below are my codes:

LoadHighchart: function () {
            $('#MyContainer').highcharts({
                chart: {
                    zoomType: 'x'
                },
                title: {
                    text: null
                },
                xAxis: {
                    categories: [{
                        name: columnA,
                        categories: [columnB, columnC]
                    //}],
                    crosshair: true
                },
                yAxis: [{
                    title: {
                        text: null
                    }
                }, {
                    title: {
                        text: null
                    },
                    opposite: true
                }],
                plotOptions: {
                    column: {
                        stacking: 'quantity'
                    },
                    spline: {
                        marker: {
                            enabled: true
                        }
                    },
                    series: {
                        cursor: 'pointer',
                        marker: {
                            lineWidth: 1
                        }
                    }
                },
                series: [{
                    type: 'column',
                    name: 'ColA',
                    data: columnA,
                }, {
                    type: 'spline',
                    name: 'ColB',
                    data: columnB,
                }, {
                    type: 'spline',
                    name: 'ColC',
                    data: columnC,
                    yAxis: 1,
                    tooltip: {
                        valueSuffix: '%'
                    }
                }]
            });

        },

What I have tried:

1. Refer to the example from below link but it did not work out as expected.
http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories