Overlapping columns in highchart

Question

Is there a way to create overlapping columns?

For example in this jsFiddle, the blue and the red columns should overlap each other as shown below, with the blue being the one at the back and red in front.

To clarify, I don't want stacked columns, both the blue and red columns should start from the xAxis (y=0) and not one over the other

Answer 1

EDIT Highcharts has introduced plotOptions.column.grouping switch in their version 2.3 to handle exactly this. Refer Garrick's Answer

I will leave below answer as it still helps understand how the groupPadding and pointWidth work.

Original Answer

You are looking for grouped and overlapping columns?

You can achieve this by setting plotOptions.column.groupPadding to 0.5

plotOptions: {
    column: {           
        groupPadding: 0.5   // Exactly overlap
        pointWidth: 20,                                     
    }
},

Here's an image to illustrate how groupPadding works

As you see, when groupPadding is 0.5 the column width is compromised to give the desired padding, by specifying the pointWidth you can counter this behavior

Answer 2

You can also accomplish this by setting grouping: false.

http://jsfiddle.net/garrickcheung/67BkD/19/