Lead and Lag, or What Do You Need to Know about Auto Scheduling in Gantt

| |
6 minutes
| Leave a comment

The importance of automating the behavior of a project schedule increases manifold as the project’s complexity grows. By saying “complex”, we don’t necessarily mean the overall quantity of tasks that your project consists of. The relationships between these tasks are also significant. For example, in some cases, the dependent activity shouldn’t strictly start after its predecessor is finished, but it can start after some delay.

Since it can be pretty hard to predict all possible difficulties, unforeseen delays can cause a chain of changes that you’ll have to make in the project. Besides including extra time resources to the working plan, the possibility of using auto scheduling can save you from a headache caused by the necessity of manual changes.

In this article, we’ll take a look at the feature of Gantt that provides you with the ability to schedule tasks automatically depending on relations between them. Besides that, you can create complex relations named Leads and Lags between the tasks you have.

Auto Scheduling in Gantt Chart

Auto scheduling updates the start date of the second (dependent) task, if the end date of the first task changes. This feature allows you to generate and maintain the project schedule by specifying relations between tasks with no need to set or update dates of each task manually.


We assume that you already know how to add the Gantt Chart to your page and initialize it. If not, have no fear. This getting started guide will take you by the hand and walk you through all the required stages.

To add the auto scheduling functionality to your app, you need to include the corresponding JavaScript file on the page:

<script src="../codebase/ext/dhtmlxgantt_auto_scheduling.js"></script>

And then, use the following line to enable auto scheduling in Gantt:

gantt.config.auto_scheduling = true;

If needed, you can disable auto scheduling for individual tasks like this:

var task = gantt.getTask(id);
task.auto_scheduling = false;

To see how auto scheduling work, you can check this demo.

Leads and Lags. A Brief Introduction

Let’s start from the theoretical part. In project management, there are four types of dependencies between the tasks:

  • Finish to Start (FS)
  • Finish to Finish (FF)
  • Start to Start (SS)
  • Start to Finish (SF)

There’s a simple rule that can help you remember the meaning of each of them: the first letter defines the behavior of predecessor, the second one defines the behavior of successor. For example, Finish to Start (FS) means that after the previous task is finished, the next task starts.

In some cases, predefined constraints require adding a time gap between the tasks. Let’s look at a classical example. Imagine that you want to build a house. You need to add plaster to the wall and then paint it. Since you should finish the first task before painting, what we have here is Finish to Start (FS) dependency between the tasks. But we want to give plaster some time to set up before painting. Thus, we should add a delay to the project. If you want to wait for two days (or other units of time that you prefer to use) before starting the next task, the relationship between the tasks will look like this: FS+2. This amount of time that we want to add to the project to delay the successor activity called Lag.

To meet deadlines, you may want to keep some extra time. For example, you have two tasks that have FS dependency: write the documentation and then edit it. But you don’t have to wait until the first task is finished. Instead of that, you can start the editing process after some part of the documentation is ready. Let’s say, you want to start the second task three days before the first one is finished. In this case, the dependency between these tasks will be FS-3, and this is what we call Lead.

We hope that you now have a common understanding of how leads and lags work and how you can improve the project management process using them. Now, let’s learn how you can implement them using Gantt.

Using Lags and Leads in Gantt

You may need to have an opportunity to create complex relations between linked tasks in Gantt. If you want them not just to follow each other, but overlap or have a delay between the end of the first one and the start of the second one, lag and lead values will be of great help.

As it has already been said, leads and lags describe relations between activities, which means that in case of Gantt they allow us to manipulate links between tasks.

Here’s how it works. Each link definition consists of several properties:

id – (string, number) the event id
source – (number) the id of the source task
target – (number) the id of the target task
type – (string) the type of the dependency: “0” – ‘finish to start’, “1” – ‘start to start’, “2” – ‘finish to finish’, “3” – ‘start to finish’.

Here’s an example:


What we need to do first is to get the link that we want to change using its ID:

var link = gantt.getLink(1);

As we have mentioned above, a lag is denoted by the “+” sign with the following number of time units that corresponds to the delay we want to add (for example FS+5). A lead, in its turn, uses the “-” sign and a desired number.

dhtmlxGantt follows the same logic. You should use a positive value to add a lag and a negative value to specify a lead. Here’s how we can change the required property of the link that we got on the previous step:

/*the successor activity will be delayed with respect to the predecessor activity*/
link.lag = 5
/*the successor activity will be precipitated with respect to the predecessor activity*/
link.lag = -5

That’s it. The lag property is used for adding both leads and lags. The value of this property defines which one will be created.

In addition to the described functionality, Gantt allows you to recalculate the schedule starting from a particular task, enable or disable auto scheduling on data loading, use events, and many other handy features. To learn how you can use them check the documentation page.

download gantt

Advance your web development with DHTMLX

Gantt chart
Event calendar
Diagram library
30+ other JS components
Try for Free
30 days free of charge with official technical support