Dependencies

This feature draws dependencies between tasks. Uses a dependency store to determine which dependencies to draw.

Getting started
//<code-header>
fiddle.title = 'Getting started';
//</code-header>
const project = new ProjectModel({
    startDate : new Date(2020, 0, 1),

    events : [
        {
            id       : 1,
            name     : 'Write docs',
            expanded : true,
            children : [
                { id : 2, name : 'Proof-read docs', startDate : '2020-01-02', endDate : '2020-01-05' },
                { id : 3, name : 'Release docs', startDate : '2020-01-09', endDate : '2020-01-10' }
            ]
        }
    ],

    dependencies : [
        { id : 1, fromEvent : 2, toEvent : 3 }
    ]
});

const gantt = new Gantt({
    project,
    appendTo : targetElement,

    startDate : new Date(2019, 11, 31),
    endDate   : new Date(2020, 0, 11),

    // autoHeight  : true,
    height : 300,

    columns : [
        { type : 'name', field : 'name', text : 'Name' }
    ]
});

To customize the dependency tooltip, you can provide the tooltip config and specify a getHtml function. For example:

const gantt = new Gantt({
    features : {
        dependencies : {
            tooltip : {
                getHtml({ activeTarget }) {
                    const dependencyModel = gantt.resolveDependencyRecord(activeTarget);

                    if (!dependencyModel) return null;

                    const { fromEvent, toEvent } = dependencyModel;

                    return `${fromEvent.name} (${fromEvent.id}) -> ${toEvent.name} (${toEvent.id})`;
                }
            }
        }
    }
}

Styling all dependency lines

You can easily customize the arrows drawn between events. To change all arrows, apply the following basic SVG CSS:

.b-sch-dependency {
   stroke-width: 2;
   stroke : red;
}

.b-sch-dependency-arrow {
    fill: red;
}

Dependencies global styling
//<code-header>
fiddle.title = 'Dependencies global styling';
//</code-header>
CSSHelper.insertRule(`.b-gantt .b-sch-dependency {
   stroke-width: 2;
   stroke : red;
}`, targetElement.getRootNode());

const gantt = new Gantt({
    appendTo : targetElement,
    flex     : '1 0 100%',
    project  : {
        startDate : new Date(2026, 0, 1),
        tasks     : [
            { id : 1, name : 'Write docs', startDate : '2026-01-01', endDate : '2026-01-03' },
            { id : 2, name : 'Proof-read docs', startDate : '2026-01-03', endDate : '2026-01-05' },
            { id : 3, name : 'Release docs', startDate : '2026-01-05', endDate : '2026-01-10' }
        ],
        dependencies : [
            { id : 1, fromTask : 1, toTask : 2 },
            { id : 2, fromTask : 2, toTask : 3 }
        ]
    },
    startDate : new Date(2025, 11, 31),
    endDate   : new Date(2026, 0, 11),
    height    : 300
});

Styling individual dependency lines

To style an individual dependency line, you can provide a cls in your data:

{
    "id"   : 9,
    "from" : 7,
    "to"   : 8,
    "cls"  : "special-dependency"
}

// Make line dashed
.b-sch-dependency {
   stroke-dasharray: 5, 5;
}

Dependencies single styling
//<code-header>
fiddle.title = 'Dependencies single styling';
//</code-header>
CSSHelper.insertRule(`.b-gantt .b-sch-dependency-special-style {
   stroke-dasharray: 5, 5;
   stroke : blue;
}`, targetElement.getRootNode());

const gantt = new Gantt({
    appendTo : targetElement,
    flex     : '1 0 100%',
    project  : {
        startDate : new Date(2026, 0, 1),
        tasks     : [
            { id : 1, name : 'Write docs', startDate : '2026-01-01', endDate : '2026-01-03' },
            { id : 2, name : 'Proof-read docs', startDate : '2026-01-02', endDate : '2026-01-05' },
            { id : 3, name : 'Release docs', startDate : '2026-01-09', endDate : '2026-01-10' }
        ],
        dependencies : [
            { id : 1, fromTask : 1, toTask : 2, cls : 'b-sch-dependency-special-style' },
            { id : 2, fromTask : 2, toTask : 3 }
        ]
    },
    startDate : new Date(2025, 11, 31),
    endDate   : new Date(2026, 0, 11),
    height    : 300
});

By default predecessors and successors in columns and the task editor are displayed using task id and name. The id part is configurable, any task field may be used instead (for example wbsCode or sequence number) by Gantt#dependencyIdField property.

const gantt = new Gantt({
   dependencyIdField: 'wbsCode',

   project,
   columns : [
       { type : 'name', width : 250 }
   ],
});

Also see DependencyColumn#dependencyIdField to configure columns only if required.

This feature is enabled by default

Configs

35

Common

disabledInstancePlugin
listenersEvents

Dependency creation

allowCreateDependencyCreation
allowCreateOnlyParentDependencyCreation
allowDropOnEventBarDependencyCreation
creationTooltipDependencyCreation
creationTooltipTemplateDependencyCreation
showCreationTooltipDependencyCreation

Dependency terminals

terminalClsDependencyCreation
terminalHideDelayDependencyCreation
terminalOffsetDependencyCreation
terminalShowDelayDependencyCreation
terminalSidesDependencyCreation
terminalSizeDependencyCreation

Dependency tooltip

showTooltipDependencyTooltip
tooltipDependencyTooltip
tooltipTemplateDependencyTooltip

Misc

bubbleEventsEvents
callOnFunctionsEvents
clientInstancePlugin
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable

Other

catchEventHandlerExceptionsEvents
clickWidthDependencies
drawAroundParentsDependencies
drawOnEventInteractionDependencies
drawOnScrollDependencies
enableDeleteDependencies
highlightDependenciesOnEventHoverDependencies
markerDefDependencies
radiusDependencies
removeIconClsDependencies
showLagInTooltipDependencyTooltip

Rendering

rendererDependencies

Properties

34

Common

disabledInstancePlugin

Class hierarchy

isDependencies: Boolean= truereadonly
Identifies an object as an instance of Dependencies class, or subclass thereof.
isDependencies: Boolean= truereadonlystatic
Identifies an object as an instance of Dependencies class, or subclass thereof.
isDelayableDelayable
isDependencyCreationDependencyCreation
isDependencyTooltipDependencyTooltip
isEventsEvents
isInstancePluginInstancePlugin
isLocalizableLocalizable

Dependency creation

allowDropOnEventBarDependencyCreation
creationTooltipTemplateDependencyCreation

Dependency terminals

terminalHideDelayDependencyCreation
terminalOffsetDependencyCreation
terminalShowDelayDependencyCreation
terminalSizeDependencyCreation

Dependency tooltip

showTooltipDependencyTooltip
tooltipTemplateDependencyTooltip

Lifecycle

configBase
isConstructingBase
isDestroyedBase
isDestroyingBase

Misc

callOnFunctionsEvents
clientInstancePlugin
localeHelperLocalizable
localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents
clickWidthDependencies
drawAroundParentsDependencies
drawOnEventInteractionDependencies
drawOnScrollDependencies
enableDeleteDependencies
highlightDependenciesOnEventHoverDependencies
radiusDependencies

Rendering

rendererDependencies

Functions

36

Other

resolveDependencyRecord

Returns the dependency record for a DOM element

ParameterTypeDescription
elementHTMLElement

The dependency line element

Returns: DependencyModel -

The dependency record

addListenerEvents
createOnFrameDelayable
deselectDependencyDependencies
hasListenerEvents
LstaticLocalizable
onEvents
refreshDependencies
relayAllEvents
removeAllListenersEvents
removeListenerEvents
resumeEventsEvents
selectDependencyDependencies
suspendEventsEvents
triggerEvents
unEvents

Configuration

applyDefaultsstaticBase

Dependency creation

abortDependencyCreation
hideTerminalsDependencyCreation
showTerminalsDependencyCreation

Events

detachListenersBase

Lifecycle

constructBase
constructorBase
destroystaticBase
doDestroyBase
setConfigBase

Misc

animatePropertyBase
callbackBase
doDisableInstancePlugin
downloadTestCaseBase
initClassstaticBase
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable
resolveCallbackBase
updateLocalizationLocalizable

Events

19
afterDependencyCreateDropDependencyCreation
beforeDependencyCreateDragDependencyCreation
beforeDependencyCreateFinalizeDependencyCreation
beforeDestroyEvents
beforeShowTerminalsDependencyCreation
catchAllEvents
dependenciesDrawnDependencies
dependencyClickDependencies
dependencyContextMenuDependencies
dependencyCreateDragStartDependencyCreation
dependencyCreateDropDependencyCreation
dependencyDblClickDependencies
dependencyMouseOutDependencies
dependencyMouseOverDependencies
dependencyValidationCompleteDependencyCreation
dependencyValidationStartDependencyCreation
destroyEvents
disableInstancePlugin
enableInstancePlugin

Event handlers

19
onAfterDependencyCreateDropDependencyCreation
onBeforeDependencyCreateDragDependencyCreation
onBeforeDependencyCreateFinalizeDependencyCreation
onBeforeDestroyEvents
onBeforeShowTerminalsDependencyCreation
onCatchAllEvents
onDependenciesDrawnDependencies
onDependencyClickDependencies
onDependencyContextMenuDependencies
onDependencyCreateDragStartDependencyCreation
onDependencyCreateDropDependencyCreation
onDependencyDblClickDependencies
onDependencyMouseOutDependencies
onDependencyMouseOverDependencies
onDependencyValidationCompleteDependencyCreation
onDependencyValidationStartDependencyCreation
onDestroyEvents
onDisableInstancePlugin
onEnableInstancePlugin

Typedefs

2

CSS variables

26