Chart.js: [FEATURE] Gantt Charts

Created on 30 Jun 2017  Â·  8Comments  Â·  Source: chartjs/Chart.js

With the inclusion of Moment.js, it feels odd not to have even the bare bones such a time-oriented chart available. Horizontal bars don't quite do the job, even with a Moment.js-based time axis.

I realize this is a rather large feature request.

Expected Behavior

  • Gantt should be an available choice for chart type under the config.
  • Each dataset would represent a row in the Gantt chart.
  • Datasets would contain the Moment ranges that are being displayed.
  • Background/border color lists would determine each section of the row in the chart that is filled in.
implement externally enhancement

Most helpful comment

My use case is an overview of job executions of last 24 hours. With some additional coding I could solve my main problems. But solution still smells. Here is a simple sample https://jsfiddle.net/Lq3aptph/.

  • Multiple bars are possible. But this requires two additional datasets per bar. In summary there must exist 2 times maximum of bars per row (job in my case).
  • Tooltip problem with filtering requires also a custom tooltip with adjustment of some styles.

gantt in chart js

Problems:

  • Scalability is bad for increasing horizont (from last 24 Hours to 30 days f.e.)
  • Colorizing bars with some information (f.e. success=green, failed=red) is very hard and requires much more datasets.
  • Label information of overlapped jobs (started out of horizont) could not be displayed correctly. Therefore only jobs started in horizont could be displayed now.

Further considerations could be to use a scatter chart instead. But my first tries were not sufficient.

All 8 comments

I think this request is best implemented as an external plugin. The specialized logic for this will make the core too big

Hi guys,
This is exactly the feature I am looking for and am currently trying to create it out of a stacked bar chart, but @JSchrepp is right its a bit cumbersome. Having the ability to have it stackable with milestones would be very useful. So I guess integrating it into mixed charts would probably do this. Just a thought. Cheers guys!

Hey,

+1 for this extension. I'm also at the point to visualize a Gantt chart. The hack via horizontal bar does work with some limitations:

  • Multiple bars in one row are very insufficient.
  • Problems with tooltip visibility.

Regards Thomas

@thomasjoscht
Not sure if this helps but here is what I did based on another post. The line chart made it a lot easier to grab tooltips. Im new to Javascript but it seems to be working out if I hide the Legend. https://jsfiddle.net/c_jarv/cb47aejn/

My use case is an overview of job executions of last 24 hours. With some additional coding I could solve my main problems. But solution still smells. Here is a simple sample https://jsfiddle.net/Lq3aptph/.

  • Multiple bars are possible. But this requires two additional datasets per bar. In summary there must exist 2 times maximum of bars per row (job in my case).
  • Tooltip problem with filtering requires also a custom tooltip with adjustment of some styles.

gantt in chart js

Problems:

  • Scalability is bad for increasing horizont (from last 24 Hours to 30 days f.e.)
  • Colorizing bars with some information (f.e. success=green, failed=red) is very hard and requires much more datasets.
  • Label information of overlapped jobs (started out of horizont) could not be displayed correctly. Therefore only jobs started in horizont could be displayed now.

Further considerations could be to use a scatter chart instead. But my first tries were not sufficient.

+1 for a Gantt plugin, it's the only thing missing in my opinion, Google Charts gantt is terribly outdated

I'd like that as well. I don't want to drag in another library.

Closing since this isn't a feature that will be in the core library

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Woogles picture Woogles  Â·  3Comments

gouthamrv picture gouthamrv  Â·  3Comments

longboy picture longboy  Â·  3Comments

lizbanach picture lizbanach  Â·  3Comments

SylarRuby picture SylarRuby  Â·  3Comments