Overlapping columns

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; margin: 0 auto"></div>

JavaScript

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

        chart: {
            type: 'column'
        },



        plotOptions: {
            column: {     
                //borderWidth: 0,
                pointPadding: 0.1,
                groupPadding: 0.3,
            }
        },

        series: [{
            name: 'John',
            data: [3, 8, 4, 7, 2, 5, 2, 4, 7]
        }, {
            name: 'Joe',
            data: [4, 7, 4, 2, 5, 5, 6, 8, 6]
        }, {
            name: 'Jane',
            data: [5, 6, 6, 2, 1, 4, 3, 2, 6]
        }, {
            name: 'Janet',
            data: [6, 5, 4, 4, 3, 5, 7, 4, 3]
        }, {
            name: 'John2',
            data: [5, 3, 4, 7, 2, 5, 2, 4, 7]
        }, {
            name: 'Joe2',
            data: [3, 4, 4, 2, 5, 5, 6, 8, 6]
        }, {
            name: 'Jane2',
            data: [2, 5, 6, 2, 1, 4, 3, 2, 6]
        }, {
            name: 'Janet2',
            data: [3, 6, 4, 4, 3, 5, 7, 4, 3]
        }]
    });
});