Highcharts highstocks - Dual chart axis issue

Question

Looking through the documentation for Highstocks, I found this example:

Shown here is two series on the same chart, therefore with a linked range selector - this is really really useful, but I wish to display something different which is proving to be very difficult.

What I'm looking for is a normal line graph on the top series, representing data plotted onto time (almost like in this example), but a bar chart or horizontal candle chart in the lower graph, representing one or more timelines.

I've drawn an image of what I'm looking for:

I apologise for the crude drawing, but hopefully it shows what I am aiming to achieve: standard graph on top, bar/candle on bottom.

I have attempted various techniques to render this, but I can't find a way to have both series drawn on the same timescale, linked with the same range selector.

In case it helps, here's a starting point on JSFiddle, with all the unnecessary code removed: http://jsfiddle.net/g105b/8JhXv/

and a link to the original demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/

Answer 1

Answer taken from official Highcharts forum

it is possible, but with some limitations. In the fact you want to show gantt chart. Bar charts aren't possible in your case - bar chart = inverted whole chart (yAxis becames xAxis, etc). Instead take a look at example for gantt chart: http://jsfiddle.net/highcharts/r6emu/

You can combine them into one, ane effect: http://jsfiddle.net/8JhXv/1/

About limits:

• tooltip fo bottom chart is availabe only when you mouseover start and end date
• bars are on lines, not between them