Population pyramid for different regions in Highcharts

Question

Using Highcharts, I would like to create a population pyramid similar to this one:

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-negative-stack/

but that would compare different regions. So instead of one bar for every age group & gender, I would have 3 bars, each representing a different region.

What I have so far is this, but I'm not sure if I'm headed in the right direction.

http://jsfiddle.net/YCxgr/

As you can see, the bars for a given age category and region are not aligned with each other: what I want is to have the bars for a region correctly aligned for both genders, so that they appear as 3 bars (one for each region) instead of 6. How can I achieve this?

Answer 1

one up for you jsFiddle now answering your question

   series: [{
    name: 'Region 1',
    zIndex: 1000,
    data: [[0, -3 ],[0,3],[1, -5] ,[1,5],[2, -4],[2,4],[3, -3],[3,3]]
},{
    name: 'Region 2',
    data: [[0, -4] ,[0,4],[1, -2],[1,2],[2, -6],[2,6],[3, -4],[3,4]]
},{
    name: 'Region 3',
    data:  [[0, -3],[0,3],[1, -5],[1,5],[2, -4],[2,4],[3, -3],[3,3]]
}]

WORKING jsFiddle