Highcharts Grouped stack x.axis name + category name

Question

I am trying to get my highcharts graph to look like this or similar to this.

I have tried to use groupped category addon for highcharts, but it down not seem to work well with stack option.

sample in JSFiddle: http://jsfiddle.net/02ey1hbr/7/

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: {
      labels: {
                    rotation: -0,
                    style: {
                        fontSize: '10px',
                        align: 'Right',
                    }

                },
        categories: [{
                name: "Case A",
                categories: ["Male", "Female"]
            }, {
                name: "Case B",
                categories: ["Male", "Female"]
            }]
    },
    yAxis: {
        min: 0,
        title: {
            text: 'x-axis'
        }
    },
    legend: {
        reversed: true
    },
  plotOptions: {
    bar: {
      stacking: 'normal'
    }
  },

    series: [{
        name: 'x',
        data: [5,3,4,5],
                stack: 'StackA'
    }, {
        name: 'y',
        data: [3,5,4,5],
        stack: 'StackA'
        },{
        name: 'x',
        data: [5,3,4,5],
                stack: 'StackB'
    }, {
        name: 'y',
        data: [3,5,4,5],
        stack: 'StackB'
        }
    ]
});

Answer 1

Within my project, using stacks allows me to get better control over the 12 data sets in a series that is split into 2 stacks. Example in jsfiddle is a smaller version to get the proof of concept working and better interact with community. Stacks also make the code much easier to maintain.

Using: Proper x-axis for Highcharts stack group column as a reference, i was able to modify my example to: http://jsfiddle.net/02ey1hbr/11/ and achieve a working example with stacks. Its not perfect but really close to.

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: [{
          categories: ["Case A", "Case B","Case C", "Case D"],
          labels: {
            rotation: -90,
            x: -60,
            style: {
              fontSize: '10px',
              align: 'Right',
            }
          },
          tickWidth: 1,
          tickLength: 60,
    },
    {
       categories: ['Male', 'Female','Male', 'Female','Male', 'Female','Male', 'Female'],
       opposite: false,
        labels: {
          rotation: 0,
          x: 60,
          style: {
            fontSize: '10px',
            align: 'Right',
          }
        },
        tickWidth: 0,
    }],
    yAxis: {
        min: 0,
        title: {
            text: 'x-axis'
        }
    },
    legend: {
        reversed: true
    },
  plotOptions: {
    bar: {
      stacking: 'normal'
    }
  },
    series: [{
        name: 'x',
        data: [1,8,9,16],
                stack: 'StackA'
    }, {
        name: 'y',
        data: [1,7,10,15],
        stack: 'StackA'
        },{
        name: 'x',
        data: [3,6,11,14],
                stack: 'StackB'
    }, {
        name: 'y',
        data: [4,5,12,13],
        stack: 'StackB'
        },
         {
           name: '',
           data: [0,0,0,0,0,0,0,0],
           showInLegend: false,
           stack: 'StackB',
           xAxis: 1            
        }
    ]
});

Answer 2

To display bar the way you want, you need to get rid of the stack property from all series. Why do you want to preserve them? They are used for dividing series into groups. I also corrected position of labels using x property.

API Reference:
http://api.highcharts.com/highcharts/series%3Ccolumn%3E.stack http://api.highcharts.com/highcharts/xAxis.labels.x

Example:
http://jsfiddle.net/sjtdgq9L/

Answer 3

Change your series to:-

series: [{ name: 'x', data: [5,3,4,5] }, { name: 'y', data: [3,5,4,5] },{ name: 'x', data: [5,3,4,5] }, { name: 'y', data: [3,5,4,5] } ]