[Solved]-Highcharts how to draw dual axis negative stack bar?-Highcharts

Managed to get a rough version working:

http://jsfiddle.net/willycheung/xqw1x012/4/

var categories = ['<strong>Michael Bachman</strong><br>90% ($2.42M)', '<strong>Neil Anderson</strong><br>85% ($2.15M, <span style="color:orange">$750k</span>)', '<strong>Kelvin Luis</strong><br>63% ($1.5M)', '<strong>Steven Yellen</strong><br>62% ($1.2M, <span style="color:orange">$45k</span>)', '<strong>Richard Wally</strong><br>60% ($952K)', '<strong>Varian Lopez</strong><br>40% ($125K)', '<strong>Charlie Schema</strong><br>38% ($120K, <span style="color:red">$80k</span>)', '<strong>Ben Shorty<strong><br>36% ($450K, <span style="color:red">$120k</span>)', '<strong>Stephanie Smiles</strong><br>28% ($550K)', '<strong>Bruce Wallus</strong><br>25% ($104K)',
                            '<strong>Rick Martin</strong><br>24% ($390K)', '<strong>Natale Salesy</strong><br>21% ($330K)'];

$(document).ready(function () {
    Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: null
        },

        xAxis: [{
            categories: categories,
            gridLineidth: 0,
            minorGridLineWidth: 0,
            lineWidth: 0,
            tickWidth: 0,
            labels: {
                enabled: false
            }
        }, { // miror axis on right side
            categories: categories,
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            lineWidth: 0,
            tickWidth: 0,
            linkedTo: 0,
                        labels: {
                align: 'center'
            }
        }],
        yAxis: [{
            title: {
                text: null
            },
            labels: {
                enabled: false
            },
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            lineWidth: 0,
            left:-60,
            width: 250
        },{
            title: {
                text: null
            },
            labels: {
                enabled: false
            },
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            lineWidth: 0,
            left:300,
            width: 250
        }],

        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                    'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
            }
        },

        series: [{
            name: 'Male',
            data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
                -3.0, -3.2, -4.3, -4.4, -3.6]
       }, {
            name: 'Female',
            yAxis: 1,
            data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
                3.1, 4.1, 4.3, 3.6]
        }]
    });
});