javascript - Grouping Legends in Highcharts

I have two stacked bar charts, but all the legends (of both bars) are displayed together. I want to group the legends based on the items stacked in the bar.
can some one help me?

$(function () {

        $('#container').highcharts({

            chart: {
                type: 'bar'
            },

            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 ''+ this.x +'
'+
                        this.series.name +': '+ this.y +'
'+
                        'Total: '+ this.point.stackTotal;
                }
            },


            plotOptions: {
                bar: {
                    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'
            }]
        });
    });

I have similar type of bar. and i want to group janet and jane together as a group and joe and john as another group.

Answer

Based on the reference example you linked to, you can do this with the new series 'linkedTo' property in version 3.

http://api.highcharts.com/highcharts#plotOptions.series.linkedTo

updated example:
http://jsfiddle.net/jlbriggs/6gw5P/2/

linkedTo:':previous'