在堆叠的列范围图中显示重叠范围，而不是重叠

Question

I need to generate columnrange charts with categories on the Y axis and datetime on the X axis. There are multiple ranges per category. Sometimes, two ranges overlap in the same category, like this:

data: [
    [0, Date.parse('Sun, 17 Jan 2016 16:00:00 GMT'), Date.parse('Sun, 17 Jan 2016 17:00:00 GMT')],
    [0, Date.parse('Sun, 17 Jan 2016 16:30:00 GMT'), Date.parse('Sun, 17 Jan 2016 17:30:00 GMT')]
]

As you can see, one range goes from 16:00 to 17:00, and the other goes from 16:30 to 17:30, in the same category. Currently, these get rendered overlapped: https://jsfiddle.net/felixfbecker/18mst6dj/3/

I need those to display more like this (quick Illustrator mockup):

So they dont get overlapped but are shown stacked, but still in the same category. Is there any way to achieve this (preferably in Highcharts, if not, maybe in some other charting library)?

Answer 1

I found the answer in the forums: http://forum.highcharts.com/post120037.html

tl;dr you have to add them to a new series, but can link the two series with linkedTo so they only show up once in the legend.