CODEWITHSUNDEEP
javascripthighcharts
Mattias Rasmusson
Mattias Rasmusson

Reputation: 120

Highcharts.js combined bar/line chart with timespan bars

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?

Upvotes: 0

Views: 2230

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can try to use line series and columnrange (http://www.highcharts.com/demo/columnrange)

Upvotes: 0

jlbriggs
jlbriggs

Reputation: 17800

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.

Upvotes: 1

Related Questions