Highcharts.js combined bar/line chart with timespan bars

Question

What I am trying to achieve is to develop a graph that combines line series with bars. The x axis should be a simple timeline (dates) and the 2 y axes should be linear or logarithmic values. I have no problem creating the line series and the timeline axis.

My problem is when I am trying to implement the "time span bars". It's sort of a gantt chart combined with a line chart I guess. The bars represent data where each bar has a start date, and optionally an end date. I want each bar to start at the start date (aligned with the x axis) and end at the end date if available. If no end date is available, the bar should fill the entire chart until the right edge. I cannot figure out how to combine these time span bars with the line series. I have checked out the jsfiddle /8JhXv/1/ which is pretty close to what I am trying to achieve, except in that example, they are not on top of each other. Anyone who could give me some hints on how to put these on top of each other?

Answer 1

Look at some of the options here:

http://highcharts.uservoice.com/forums/55896-general/suggestions/804783-gantt-chart

Best option is not to use actual bars, but to use line series with lineWidth set to a high enough value to mimic bars visually.

Answer 2

您可以尝试使用行系列和列范围（ http://www.highcharts.com/demo/columnrange ）