Search code examples
javascripthighchartsgantt-charthighcharts-gantt

Highcharts Gantt Setting Dependency Type

I'm setting up a highcharts gantt view and have successfully included tasks and dependencies in a working view #woohoo!

I'm looking for a way to define the dependency relationship/type and have highcharts represent the line connectors appropriately. It seems highcharts gantt is pre-configured to for end-to-start relationships; however, my project has end-to-end dependencies and some start-to-start types as well.

Is there anyway to have highcharts render these dependency relationship types?

Here is an example of an end-to-end dependency on the Customer Training & Plan & Foundation Build tasks from the project management utility. End-to-end dependency example

Here is how Highcharts is representing the same 4 tasks and relationship types - notice all dependency lines are end-to-start types:

enter image description here

Does anyone know of a an approach for this in highcharts gantt? Thanks in advance!

Solution

  • You can manipulate the arrow position by dependency.startMarker.align:

    series: [{
    dependency: {
      to: 'prepare_building',
      startMarker: {
        align: 'right',
        color: 'black'
      }
    },
    ...
  }, ...]
}]

    Live demo: https://jsfiddle.net/BlackLabel/aycwz7u2/

    API Reference: https://api.highcharts.com/gantt/series.gantt.data.dependency.startMarker.align