Highcharts Gantt is in Alpha!

Note. Since the release of this article, Highcharts Gantt has gone into production. Please read the announcement about Highcharts Gantt v1, and the Gantt product page for the latest version.

 

For the last six months or so, we’ve been working on a new Highcharts product. Today, we’re proud to announce that Highcharts Gantt is in alpha! Highcharts Gantt is a JavaScript library that extends Highcharts for easy creation of Gantt charts. It will be offered as a separate product, just like Highstock and Highmaps. Haven’t heard of Gantt, you say? Click here to read more; the same link is also available for the accessibility community here. For a live demo check the following demo JSFiddle demo.

Where to download?

The Highcharts Gantt alpha version can be downloaded here.

Can I test it?

Of course! Please do. Create Gantt charts based on your own data to see how usable it is and how it performs. We would love to hear whether it meets your use-cases. Feel free to submit your chart to our community pages, as well. Any feedback with big or small issues with naming, structure, design, performance or otherwise can be commented here on this post. You can also submit issues on GitHub, but we ask you not to clutter the GitHub issues with too many discussions about Gantt yet. We ask that you describe the problem as detailed as possible, preferably accompanied by a minimal example of the problem on JSFiddle or similar.

Parts

Highcharts Gantt consists of several modules, which extend the normal Highcharts looks and behavior:

ModuleDescription
GridAxisMakes axes look like table rows or cells
TreeGridAdds tree behavior to y-axes. Inherits grid behavior from GridAxis
PathfinderAdds lines with auto-calculated paths from one point to another (used for dependencies in Highcharts Gantt)
CurrentDateIndicatorAdds a plot line at the current date and displays it in the plot line label
ArrowSymbolsAn icon-pack for the Highcharts renderer, adding more arrow-symbols
XRangeSeriesMultiple points with the same y-value with two x-values (start and end), and partial color filling (used to display completeness)
GanttSeriesThe series type used in a Gantt chart, with many aliases for Highcharts options, which are more Gantt-friendly
GanttChartAdds the Highcharts.ganttChart()-constructor which creates two datetime x-axes on top of the chart with weeks and days in granularity, creates one treegrid y-axis, and sets the default series type to ‘gantt’

Current status

Gantt has been considered nearly Alpha-ready for a while, but was delayed due to some issues that appeared during testing with TreeGrid and datasets that had not been used before. TreeGrid fundamentally changes how the data is viewed and treated, and this is why the issues only emerged so late in development. Furthermore, the addition of applying a static scale to a Gantt chart proved problematic due to the order of positioning and rendering logic in Gantt.

As we are starting alpha testing, the API, features, and functionality are all open for negotiation. There are probably bugs, performance issues and design concerns that we have not addressed, but this is why we test.

Known issues

Below follows a list of known issues at this time, categorized into the different modules being used in Gantt. Any thoughts or further elaborations of a problem is welcome.

GanttSeries

  1. Does not yet aggregate data from subtasks to parent tasks. For example, start and end dates could be calculated based on information from subtasks

TreeGrid

  1. The arrows on parent nodes are not yet clickable.
  2. There is yet no API for triggering a collapse or expand yet. The following methods will be attached to an appropriate object: `collapse()`, `expand()`, `toggleCollapse()` and `isCollapsed()`.
  3. There is yet no system for creating a table with the TreeGrid.
  4. Cannot yet be applied to x-axis

Pathfinder

  1. The `fastAvoid` algorithm in Pathfinder crashes when collapsing/expanding a tree grid, or showing/hiding a series. Seems to have to do with animation.
  2. Pathfinder markers:
    • Rendered underneath points, causing the point stroke to make the markers appear cropped.
    • Often positioned slightly incorrect (≈±1px) in relation to the path, making them look skewed.
  3. The ‘fastAvoid’-algorithm sometimes chooses to go around the starting point before approaching the end point.
  4. Paths do not animate when the chart changes.
  5. When collapsing, path positions are not updated, leaving them mispositioned

CurrentDateIndicator
The time in the label does not update itself yet, but waits for the axis to be rendered, which happens every time the chart size is altered

Data Format

The current data format is explained below with the syntax used in api.highcharts.com.

// The ganttChart() constructor comes with a set of predefined values 
// for x- and y-axes, making the necessary configuration smaller
Highcharts.ganttChart('container', {

	xAxis: {
		// The current-date-indicator.
		currentDateIndicator: true,

		// Min and max on both x-axes
		min: Date(),
		max: Date()
	},

	series: [{
		data: [{
			// Display name of task
			taskName: 'Inspect building',

			// Reference id for tasks which depends on, or are 
// children of, this task.
			id: 'inspect_building',

			// Depends on a task with id: 'prepare_building'.
			dependency: 'prepare_building',

			// The parent task of this task is 'new_offices'.
			parent: 'new_offices',

			// Whether or not this is a milestone. Milestones are
			// rendered as diamonds (square rotated 45º).
			milestone: false

			// Start and end dates. If milestone, end date is 
// ignored.
			start: Date(2017, 3, 7),
			end: Date(2017, 3, 25),

			// Adds a partial fill with configurable fill and
			// stroke. Amount is 0.1-1.0. Value can also be simply 
// a number, using default values (completed: 0.2).
			completed: {
				amount: 0.2,
				fill: '#FFAA00'
			}

			// The usually required y-value is auto-calculated 
// after the point's position in the tree(s).
		}]
	}]
});

75 thoughts on “Highcharts Gantt is in Alpha!”

  • Ralf Guttmann says:

    https://uploads.disquscdn.com/images/d43f5b53d280f1930d5c148255d480bfe1a91906919a2f9d421da4240af93d2c.jpg
    We are using gantt charts (from fusion charts) already a couple of years and find it absolutely necessary that a milestone is not limited to just one day but has a duration between a start and an end date. From my experience from a lot of projects with customers this is a crucial feature. Another this is that the action groups should be visualized as a bracket to show a difference to a normal action. See sceen shot for example. We really would like to change from fusion charts to highcharts because we are already using the high charts library very succfesfully.

    • Mixed Content: The page at ‘https://jsfiddle.net/larsac07/t0r8qz9p/’ was loaded over HTTPS, but requested an insecure script ‘http://github.highcharts.com/gantt/highcharts-gantt.src.js’. This request has been blocked; the content must be served over HTTPS.

      08:41:45.998 fiddle.jshell.net/larsac07/t0r8qz9p/show/:63 Uncaught ReferenceError: Highcharts is not defined

      08:41:48.513 fiddle.jshell.net/:1 Mixed Content: The page at ‘https://jsfiddle.net/larsac07/t0r8qz9p/’ was loaded over HTTPS, but requested an insecure script ‘http://github.highcharts.com/gantt/highcharts-gantt.src.js’. This request has been blocked; the content must be served over HTTPS.

      08:41:48.514 fiddle.jshell.net/:63 Uncaught ReferenceError: Highcharts is not defined

      at fiddle.jshell.net/:63

  • cedric reymond says:

    Hello,
    Do you know if it’s possible to display months instead of weeks and days?
    currentDateIndicator: true, this paramater does not seems to have any effects…

  • Hello I need to customize high gantt charts with custom labels for bars and place hyper link for y-labels. Is there a way around?

      • Also when I am adding Long Duration in Min and Max values of chart then the UI of chart is breaking why it is not flexible to manage the width of Table according to Date Range?

          • Hey pardon for not making your clear with my question. My question is that if I provide today date in x-axis min property and put (today + 4 years) in max value and format date with months and years then the X-Axis of month series is appearing too long which is breaking the Chart UI (Not even displaying the values in it). Here is the example https://jsfiddle.net/53ya6yq8/1/. I saw Google Gantt charts in which if there is such situation then it gracefully handles the width of X-axis. Is there any way it just skip middle months and show like (June, July … ) this or something?

        • Thank you for this. Also please tell me that if I can customize few more things such as Tooltip content with HTML, Legend and Bar Colors, Disable Percentage on Bars etc?

          • Thank for this API reference. I tried to change options for tooltip very few are working, I can’t override the content, is there a support for this. Also I checked onto series options in the documentation why I couldn’t find one for Gantt chart? There were options for other charts? For example I also need to place html links to the yAxis labels can you tell me how can I do that?

          • Lars Cabrera says:

            Hi, Ali. Gantt is still in Alpha, so documentation for its special options are not documented the same place yet. See the Data Format section on this page to see which options are available in addition to standard Highcharts.

            It would greatly help if you listed which tooltip options you were struggling with. I cannot see any options not working.

            Best regards, Lars Cabrera

          • Thanks for response Lars I appreciate that. Well yeah I had to struggled a lot but I figured to manage my chart, Highcharts are awesome by the way. Well there is one last thing I need from you which is that I learnt how to place data labels on bars but on one of my chart’s bar the data label is quite long which unfortunately bar is not able to display that data label however I used crop and overflow options and both seem to be not working with it. Can you help me with this?

          • Also when I am using useHTML option on dataLabels then the formatted text overlapping the tooltip. See here http://jsfiddle.net/53ya6yq8/4/. If you hover on “prepare office building” bar then you will see formatted text overlaps tooltip container.

          • Lars Cabrera says:

            When you use HTML to render your labels, the labels are generated outside the chart SVG, and therefore cannot be displayed underneath the tooltip, which is rendered in the SVG. But you can work around that with some settings and css: http://jsfiddle.net/53ya6yq8/9/

          • Lars Cabrera says:

            Oh, right, the same example. There’s unfortunately no fix for this, if you really need to have html in the data labels. I would recommend rather moving that to the tooltip. That would fix the problem

          • Yeah thanks. I was wondering that since the text is not showing up on the bar because of longer length than the bar so if I could you know place ellipsis for the text so at least some text could be shown instead of hidden text.

          • Ali, we just fixed a bug with pointFormat, so that should now work. As Lars says, Gantt is still in Alpha so there might be bugs, and the documentation is not released yet. Most generic options are similar to column charts. To allow HTML in yAxis labels, set yAxis.labels.useHTML. Example: http://jsfiddle.net/kaffwgao/

  • Anup Patil says:

    Hello,
    I have implemented Gantt chart, I would like to know that how to manipulate the tasks and sub-tasks, I mean can we manage the css for them. The parent task arrow and sub tasks are seems at a similar level, how to move sub-tasks to slightly on right (Lets say 10-15px)?
    One another point is all the parent tasks expands at the start, I just want let user decide which task to expand.

    Does ArrowSymbols module consist these things?

    Thanks
    Anup

      • Anup Patil says:

        Hi,
        How can I collapse all the tasks on loading, as it is very tough to identify the parent child relationship of tasks and sub tasks.
        I have tried editing highchart-gantt.src.js file but not succeed in it.
        Thanks in advance

        • Jon Arild (Highsoft) says:

          Hi Anup,

          If you somehow expose the isCollapse and collapse functions, by editing highcharts-gantt.src.js. Then I believe that you should be able to do the following in the chart load event:

          var axis = chart.yAxis[0];
          Highcharts.objectEach(axis.treeGridMap, function (node, pos) {
          if (!isCollapsed(axis, node, pos)) {
          collapse(axis, node, pos);
          }
          });

          While editing the source file, you should also modify the collapse function to pass in a second parameter to axis.update, to allow for optional redrawing of the chart.

          In the future this will be a much simpler process, when we get around to formalize, and expose the isCollapse, collapse, and expand functionalities.

          Hope this helps.

          Best regards
          Jon

  • Amber Blaylock says:

    Hrm. I have a bit of an odd situation trying to combine this with React – we’d been loading the general “code.highcharts.com” module on the page and then including additional modules for gauges, etc. on an as-needed basis. We have checks against repeated includes that work fine for all the other chart types. We want to do the same thing with this module, but it seems like it’s not compatible to just include both “code.highcharts.com” and “github.highcharts.com/gantt/highcharts-gantt.src.js” on the same page.

    Is my only option to replace “code.highcharts.com” with “github.highcharts.com/gantt/highcharts-gantt.src.js” and chug along? I’m not really sure that’s the best solution, given that this is in alpha. Is there any package we can include that works as an add-on with “code.highcharts.com” already included, a la highcharts-more, solid-gauge, etc.?

    (Also, is there an equivalent to setOptions for Gantt charts? We have a setup in React where we’re updating the options via setOptions on prop change if the chart already exists rather than removing and rerendering it ad nauseum.)

    • Hi Amber,
      There is a Gantt module file (modules/gantt.src.js) that can be added onto standard core Highcharts (highcharts.js), but since this module relies on changes made to the standard core that have not made it into production yet, you would still have to load the Alpha version of the standard core. Example: https://jsfiddle.net/t0r8qz9p/61/. In other words there are no particular benefits of doing it this way, as you will still be loading the Alpha version.

      Loading highcharts-gantt.src.js is the same as including the Alpha version of the standard highcharts.js as well as the Alpha Gantt module. So you are probably best off just replacing your “code.highcharts.com/highcharts.js” references with “github.highcharts.com/gantt/highcharts-gantt.src.js” for now.

      Regarding setOptions, you might be looking for “chart.update()”? See http://api.highcharts.com/highcharts/Chart.update. There might be bugs with this in combination with Gantt charts, but feel free to report those on our issue tracker: https://github.com/highslide-software/highcharts.com/issues

  • Hey, me again. Sorry to keep bugging you guys, but I’ve just encountered two errors with this. Both are specific to this version of the core code (but not Gantt-specific; one occurs with all chart types I’ve tried so far and the other was specifically identified with solid gauge coloration).

    The first is a very odd error involving an interaction between updating the props of a React component and the accessibility module.

    Specifically, the issue appears to occur under the following scenario:
    1. Include both “https://github.highcharts.com/gantt/highcharts-gantt.src.js” and “https://code.highcharts.com/modules/accessibility.js”
    2. Include a method to destroy and re-create the chart whenever the options props are updated (triggered via componentWillReceiveProps)
    3. Update the props to include new options.

    The specific received error is:

    “Uncaught TypeError: Cannot read property ‘hcEvents’ of undefined
    at H.removeEvent (VM5218 highcharts-gantt.src.js:1695)
    at H.Chart. (VM5221 accessibility.js:39)
    at H.fireEvent (VM5218 highcharts-gantt.src.js:1821)
    at H.Chart.destroy (VM5218 highcharts-gantt.src.js:16090)”

    I ran into this issue when making a reusable component we have which can display a number of dynamic data options including series pulled from a database, configurable display options, etc.

    You can see a JSFiddle reproducing the issue at a fairly minimal level here: http://jsfiddle.net/amber_workxpress/upe3bm3r/23/

    In order to reproduce it, first click the “2011-2013” button, then click “2010-2016”. After both buttons have been pressed this issue will occur each time the button is pressed. Since this does not update the options, this bug definitely is a breaking issue.

    Please note: using chart.update does resolve the issue, but does not satisfy our use case because the number and names of the series we are using may change between option updates, but using chart.update will leave in old series options after they should have been removed. (You can see an example of this behavior here: http://jsfiddle.net/amber_workxpress/upe3bm3r/24/) My research had shown that the best way to resolve this was to destroy and rebuild the chart if the series options changed; if there’s another workaround that would let us update the series arbitrarily without encountering this issue, I’d definitely be open to using it.

    **************

    The second issue appears to occur when configuring colors for solid gauges while using this package. Specifically, this happens when setting up a multi-ring gauge chart and using Highcharts.Color in order to give each ring its own color and faded corresponding color track.

    The specific error I receive for this is:


    Uncaught TypeError: c.color.tweenTo is not a function
    at H.Axis.toColor (solid-gauge.js:11)
    at solid-gauge.js:12
    at Array.forEach ()
    at H.each (highcharts-gantt.src.js:1608)
    at object.drawPoints (solid-gauge.js:12)
    at object.render (highcharts-gantt.src.js:18460)
    at object.render (highcharts-more.js:34)
    at highcharts-gantt.src.js:15918
    at Array.forEach ()
    at H.each (highcharts-gantt.src.js:1608)

    You can see a minimal example of this here: http://jsfiddle.net/amber_workxpress/a0j3f8uu/1/

    I mention both of these issues here instead of at the Git because they seems to be specific to “https://github.highcharts.com/gantt/highcharts-gantt.src.js”. Replacing it with “https://code.highcharts.com/highcharts.js” appears to resolve both issues – but of course also means no Gantt charts for us, which is difficult when we want to have both a Gantt chart on the page and either the accessibility module enabled or a multi-ring solid gauge chart with Highchart-generated colors. I can also submit these both to the Git issue tracker if you would like.

    Again, because that was very long, to summarize, I am receiving two issues: the first “Cannot read property ‘hcEvents’ of undefined” when including the accessibility module alongside the Gantt version of Highcharts core and the second being “c.color.tweenTo is not a function” when using “Highcharts.color” in a solidgauge chart alongside the Gantt version of Highcharts core. Neither error occurs with the core “https://code.highcharts.com/highcharts.js” file.

  • Renato Garbim says:

    How can I generate the graph inside a function with input parameters?

    Example:

    function mountChart(titletext, header, itensSerie, divId) {

    Highcharts.ganttChart(divId, {
    chart: {
    zoomType: ‘x’
    },
    title: {
    text: titletext
    },
    xAxis: [header],

    series: [{
    name: ‘Name’,
    data: [itensSerie]
    }]
    });
    }

    • Jon Arild (Highsoft) says:

      Hi Renato,

      Unless I have misunderstood your question, then what you show in your example is more or less one way to do it. Here is a simple live demo: https://jsfiddle.net/t0r8qz9p/85/

      I would also recommend you to use our forum (forum.highcharts.com) for technical questions in the future, where you will benefit from a much quicker response rate.

      Best regards
      Jon

  • Sandeep Mogaveer says:

    Hi,

    I’m trying to incorporate Gantt Chart on my existing page which already has different Other type of Highcharts.

    But when i try to import “highcharts-gantt.src.js”. i’m facing this error https://www.highcharts.com/errors/16.

    May b because I’m already included ”highstock.js” already. how to fix this. pls help

  • Stephane Forrer says:

    Hi … has this made it’s way out of alpha yet? We’re hoping there’s been an improvement in loading times when you have a large number of days to view (e.g. 365 days/ticks on top horizontal bar).

    Thanks

    • Jon Arild (Highsoft) says:

      Hi Stephane,

      Highcharts Gantt is still in Alpha, but we are aiming to release a Beta during December 2017.

      I would also recommend you to post your issue on our GitHub repository, and we will try to fix it as soon as possible.

      Best regards
      Jon

  • Sandeep Mogaveer says:

    Hi there, i’ve 2 cases to discuss.
    1. xAxis – min and max values. these seems to be calculating wrong if it is set to Automatic(keeping min and max to default/null).
    2. Is it wrong to have similar Task Names under 2 different Parent Tasks? Because it is showing blank for the second time and showing values together in first Parent. Though i’ve ‘id’ different for both Tasks and only task name is same.
    To replicate at JSFiddle Highchart Gantt Example..
    1. comment min and max. for first case
    2. change task name ‘Inspect building’ to ‘Relocate staff’ for second case.

    Thanks in Advance 🙂

  • Beth Stickels says:

    Hi, can you please advise when the interactive gantt charts will be released? Has it made it’s way out of alpha yet? As a company we are really interested in using this in our code.

  • Hey, quick question regarding exporting – I see that the client-side export functionality with this works fine, but does server-side exporting? I tried using the JSFiddle from the Export Module Overview page in order to export a sample set of Gantt data, but it didn’t work, and I’m not sure if I did it wrong or if it’s not supported. We’d *very* much like to be able to export Gantt data without having to go through the browser, so if there’s any way to do this, we’d really appreciate it. (We’re completely willing to run our own server if that’s what it takes; that’s on the roadmap for sooner or later regardless.)

  • Hi,
    i have an issue.
    When i try to filter projects on my gantt, some still appear even if i want to hide them.
    What i note is that if you have 5 projetcs for exemple and you want to see only the first and the third, the second stay visible.
    if you want the first and the last, all still appear.
    Am i clear enought?
    Is this normal?
    Any help to resolve my problem?

Consent for marketing cookies needs to be given to post comments