score:1

Accepted answer

You can try by specifying the x in negative coordinates, e.g.:

data: [[-21,-1746181], [-20,-1884428],[-19,-2089758], [-18,-2222362], [-17,-2537431], [-16,-2507081], [-15,-2443179],
    [-14,-2664537], [-13,-3556505], [-12,-3680231], [-11,-3143062], [-10,-2721122], [-9,-2229181], [-8,-2227768],
    [-7,-2176300], [-6,-1329968], [-5,-836804], [-4,-354784], [-3,-90569], [-2,-28367], [-1,-3878] ]

Demo Fiddle

score:1

You can set up duplicate categores with some identifier as well as add empty null points for the series that does not use them or put [x,y] points to show which category index it should go to. Then you need to modify your labels to remove the identifier. New categories:

categories = ['0-4', '5-9', '10-14', '15-19',
    '20-24', '25-29', '30-34', '35-39', '40-44',
    '45-49', '50-54', '55-59', '60-64', '65-69',
    '70-74', '75-79', '80-84', '85-89', '90-94',
    '95-99', '100 +',
    'a0-4', 'a5-9', 'a10-14', 'a15-19',
    'a20-24', 'a25-29', 'a30-34', 'a35-39', 'a40-44',
    'a45-49', 'a50-54', 'a55-59', 'a60-64', 'a65-69',
    'a70-74', 'a75-79', 'a80-84', 'a85-89', 'a90-94',
    'a95-99', 'a100 +'];

New data series:

    series: [{
        name: 'Male',
        data: [-1746181, -1884428, -2089758, -2222362, -2537431, -2507081, -2443179, -2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768, -2176300, -1329968, -836804, -354784, -90569, -28367, -3878,
        null, null, null, null, null, null, null,
        null, null, null, null, null, null, null,
        null, null, null, null, null, null, null]
    }, {
        name: 'Female',
        data: [null, null, null, null, null, null, null,
        null, null, null, null, null, null, null,
        null, null, null, null, null, null, null,
        1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,
        3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,
        1447162, 1005011, 330870, 130632, 21208]
    }]

New xAxis.label.formatter (needed on both xAxis):

            formatter: function () {
                var text = this.value;
                if (text.charAt(0) == "a") {
                    return text.substring(1);;
                } else {
                    return text;
                }
            }

You will need a similar thing on the tooltip:

    tooltip: {
        formatter: function () {
            var text = this.point.category;
                if (text.charAt(0) == "a") {
                    text = text.substring(1);;
                } else {
                    text = text;
                }
            return '<b>' + this.series.name + ', age ' + text + '</b><br/>' +
                'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
        }
    }

Live demo.


Related Query

More Query from same tag