by Gert Vaartjes
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
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