show stacked legends in a grouped column highcharts- RecatJs highcharts

Question

I have an example taken from highcharts: this question is very similar to Highcharts: legend of stacked chart however I havent found the answer I'm looking there. what I'm looking is something is to group the stack legends like shown below for every name legend it belongs.

in my case I want to have following structure in the legend

Male:
 Joe
 JOhn
Female:
 Janet
 Jane

is that possible?

I also tried : http://jsfiddle.net/7sgdbezh/ however since I'd be having multiple legends I dont want to clutter the chart with too many redundant stack name values.

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: 'Total fruit consumtion, grouped by gender'
        },

        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            }
        },

        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal;
            }
        },

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

        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'male'
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5],
            stack: 'male'
        }, {
            name: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'female'
        }, {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'female'
        }]
    });
});