Highcharts: difficulties with variable width columns - highcharts

Question

This is a follow-up from Highcharts: incorrect column placement with linked series? but I felt that this issue warranted a new post rather than a continuation of the comments in the above post.
Basically a bit of a hack is required in order to implement variable width columns. That hack is to use multiple series... one series per column width required.
But that hack leads to an issue with placement of columns, and another hack is required to move them to the right place.
But that creates an issue with a big gap between the edge of the chart area and the y axis. So another hack is required to eliminate the gap.
But that seems to create yet another issue, which is that it messes up the left-most data points in any other series on the chart.
This is illustrated in the following jsfiddle:
http://jsfiddle.net/drmrbrewer/215tnLna/33/
You'll see that something funny is happening when the cursor is over the left-most two columns. If you un-share the tooltip, the problem appears to be that the tooltip is not operating at all on the left-most two spline points.
Any way to resolve this? It's a shame you can't just have variable column widths as a native feature, specifying a column width per point...
Thanks.
jsfiddle code is as follows:
$(function () {
$('#container').highcharts({
title: {
text: 'Variable width columns'
},
xAxis: {
type: 'datetime',
tickInterval: 36e5,
labels: {
format: '{value:%H}'
},
// following are to eliminate gaps:
min: 1428048000000-36e5 + (6 * 0.5 * 36e5),
max: 1428127200000-36e5 - (6 * 0.5 * 36e5)
},
// seems to be a combination of min above
// and tooltip.shared below that freezes the
// left-most two columns
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
column: {
groupPadding: 0,
pointPadding: 0,
borderWidth: 0,
grouping: false,
color: '#22CC00'
}
},
series: [{
name: 'spline',
yAxis: 0,
type: 'spline',
zIndex: 5,
data: [{"x":1428048000000,"y":8.6},{"x":1428051600000,"y":9},{"x":1428055200000,"y":8.1},{"x":1428058800000,"y":6.6},{"x":1428062400000,"y":5},{"x":1428073200000,"y":4.9},{"x":1428084000000,"y":4},{"x":1428094800000,"y":3.4},{"x":1428105600000,"y":2.4},{"x":1428127200000,"y":6.9}],
color: '#2222CC'
},
// now the multiple series of columns having different widths, linked together...
{
name: 'column',
type: 'column',
data: [{"x":1428048000000,"y":8.6},{"x":1428051600000,"y":9},{"x":1428055200000,"y":8.1},{"x":1428058800000,"y":6.6},{"x":1428062400000,"y":5}],
pointRange: 36e5,
// following is to position the bars correctly
pointPlacement: -0.5*(3/6)*(1/3)
},{
name: 'column',
type: 'column',
data: [{"x":1428073200000,"y":4.9},{"x":1428084000000,"y":4},{"x":1428094800000,"y":3.4},{"x":1428105600000,"y":2.4}],
linkedTo: ':previous',
pointRange: 3 * 36e5,
// following is to position the bars correctly
pointPlacement: -0.5*(3/6)
},{
name: 'column',
type: 'column',
data: [{"x":1428127200000,"y":6.9}],
linkedTo: ':previous',
pointRange: 6 * 36e5,
// following is to position the bars as I want them
pointPlacement: -0.5
}]
});
});