I suggest you ...

1,130 votes
Sign in
Sign in with: Facebook Google
Signed in as (Sign out)
You have left! (?) (thinking…)
PabloSN shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →


Sign in
Sign in with: Facebook Google
Signed in as (Sign out)
  • David Boardman commented  ·   ·  Flag as inappropriate

    The tooltip that appears seems to be linked to the first category value having in a given timeframe. For example, in Tornstein's fiddle (http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/studies/xrange-series/), hovering over the "development" category between the dates Dec 10th and Dec 13th shows the tooltip for the "testing" category which also shares these dates. Any thoughts about how to limit the tooltip to a given category would be wonderful.

  • Anonymous commented  ·   ·  Flag as inappropriate

    Thanks @Stephane

    I'm trying to use your Gantt chart now and it appears the xAxis min/max it is a little wonky. I've got a page with 2 charts, a spline and your gantt, one on top of the other. I'd like the axis to line up on each of the charts and I've tried to make the min/max of each chart equal. Unfortunately the Gantt chart appears to be adding a little extra, and the two charts won't properly align.

    Here is the fiddle:

    The first point on the spline series should line up with the left edge of the first bar, but as you can see that's not the case.

  • Joseph Amato commented  ·   ·  Flag as inappropriate

    Using the column-range chart, as suggested, I have been able to get it to do exactly what I want it to. Here is a fiddle for posterity: http://jsfiddle.net/Ye3Ak/4/

    I may not be doing it in the most efficient way, but it works perfectly and addresses my concerns. Thank you very much for your help.

  • AdminTorstein Hønsi (CPO, Founder, Highcharts JS) commented  ·   ·  Flag as inappropriate

    Actually I think a horizontal columnrange chart is better suited for emulating a Gantt chart. You can add multiple points to the same x value, and use a datetime axis for the Y axis. I'm sorry I don't have time to show you a demo right now.

  • Joseph Amato commented  ·   ·  Flag as inappropriate

    So, I was able to do some modifications to the posted code and get something similar to what I was going for. The fiddle for it is here: http://jsfiddle.net/Ye3Ak/2/

    I still have two questions though:

    1. In order to set make the lines more visible, I had to set the line width fairly high. This causes the ends of the lines to overlap, and makes it difficult to clearly see where one time period ends and the other begins. is there any way to have a sharp cutoff (similar to a bar chart) while still retaining the line width?

    2. The tooltip is very wonky. It'll usually identify the proper series, but I can't figure out how it determines the value. Ideally, I would be able to hover over one of the time periods, and it would show me the time range for that period.

    Any suggestions would be greatly appreciated.

  • Daduke commented  ·   ·  Flag as inappropriate

    Implementing a Gantt Chart from line chart is pretty easy, and there is really no need implement a new type of graph...
    I am implementing a Gantt Chart app for Splunk using highcharts just the same way the fiddle do and it is working perfectly!
    You just need to work a bit on the legend, and what you want to show hide... but that is fine, everything required is in highcharts.
    It is not like you're trying to do a bar out of a pie chart... Here is the trick: just increase the linewidth of a line chart and it will do the trick.

  • coke Ito commented  ·   ·  Flag as inappropriate


    I need to setup the gantt values per hour to display true or false for different lines( dates) like the one that i did with fusiocharts, is this possible?.

    This is how i need to get it displayed (http://i.imgur.com/O05BB.png)


  • Duck commented  ·   ·  Flag as inappropriate

    hmmm, seriouse guys, how hard can it be, give us the gantt chart. EVERYONE wants it.

  • Anonymous commented  ·   ·  Flag as inappropriate

    formatter: function() {
    if(this.value == -1) return "";
    else if(this.value == tasks.length) return "";
    else return tasks[this.value] == undefined ? "" : tasks[this.value].name ;

  • Daniel Sinclair commented  ·   ·  Flag as inappropriate

    Would highcharts support interaction and binding to knockoutJS? Could I for example drag the bars around, resize and update the model?

  • Lionel commented  ·   ·  Flag as inappropriate

    It would be a great feauture to provide interactive Gantt chart with ability to modifiy the task duration by resizing it using the mouse.

  • Anonymous commented  ·   ·  Flag as inappropriate

    I've figured it out, the problem was with the tick, bacause when the tasks are more than 5 the ticks range is 0 to length.task, so I have to change the formatter function to this

    if(this.value == -1) return "";
    else if(this.value == tasks.length) return "";
    else return tasks[this.value].name;

    And now works for more than 5 tasks

Feedback and Knowledge Base