Highcharts Gantt is in Alpha!

7 years ago | Posted by News | 75 comments

Post categories:

Ehance gantt

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).
		}]
	}]
});