Dependencies between tasks#

Visualizing the work breakdown structure of a project involves also describing the dependencies between tasks. They indicate when a task should start or end. Highcharts Gantt uses the dependency property on the data point for determining relations between dependant tasks and draws arrows between them. Note that the dependency property also takes an Array<String|Object> in case of multiple dependencies.

Code example of defining dependencies

Customize dependency connectors#

The default for drawing dependencies between tasks in Highcharts Gantt is with arrows. The connectors are customizable through the object specified for the pathfinder property. Configure here for example other type of start- or end markers instead of arrows, change the line color or the dash pattern of the connector. How the connector path is drawn from task to task is determined by algorithm specified for the pathfinder.type option. The default algorithm of Highcharts Gantt, is simpleConnect, which finds a path between tasks using right angles only. Other available algorithms are straight and fastAvoid. It is possible to define custom algorithms by adding them to the Highcharts.Pathfinder.prototype.algorithms object after the chart has been created.

The pathfinder property is also available on data series, see series.pathfinder. This allows for specifying custom connectors per data series.

See code example for configuring dependencies

A single dependency is composed by setting the dependency property on a data point (task) to an object. This object has defined pathfinder options allowing for configuration of a singular dependency

See example below, where the color and endmarker are defined on the successor task