Gantt overview

The Svelte Gantt widget is designed to be easily incorporated into your Svelte application. It provides rich functionality for project management. It enables users to track project progress effectively by its planning and monitoring. It's easy to add, edit, and delete numerous scheduled tasks, set different types of tasks and determine the order of tasks by adding dependencies between them. It's possible to view multiple Gantt charts on one page, add task tooltips and vertical markers making the chart more informative, change relevant data on each project on the fly via the editor form, and even more.

Main UI elements

The Gantt chart illustrates a timeline of a project with its tasks. Its main view consists of the following elements:

• the Tasks tree or Grid area is used for quick navigation and shows each task start date, duration, and has the button control to add a task.

• the Gantt chart where:

  • the timescale shows tasks and other activities by days
  • progress bars represent such task types as projects, tasks, and milestones. Different colors are applied to differentiate between the types.
  • milestones illustrate tasks with zero duration that are used to mark important dates of the project
  • links show dependencies between tasks

• the context menu that opens on the right-click

  

  To open the context menu for a task, right click the required task in the Tasks tree or Gantt chart panel. The menu will open as in the image below:

  

Task types

There are three types of tasks in Gantt chart:

• Task
• Milestone
• Project

The color of the progress bar indicates the task type.

Task

Task is a common task. It has a rectangular shape and a blue color and is usually included into some project.

Milestone

Milestone is a diamond-shaped marker that defines an important point in the workflow. Milestones do not have duration or progress, so you can only specify the start date for them.

Project

Project is a group of tasks, milestones and other projects. It is marked green.

Managing tasks

Gantt chart allows adding tasks, editing and deleting projects, tasks, and milestones as well as converting one task type into another.

Add a task

To add a task:

1. Click the Add button in the Tasks tree area
   OR
   In the context menu hover Add and select Child task, Task above or Task below.

2. In the right sidebar modal that appears, fill in the fields about a task.

3. Click Save.

   

Convert one task type into another

To convert one task type into another, use the context menu (Option 1) or the Edit modal (Option 2).

Option 1:

1. Right click the desired task in the Tasks tree or Gantt chart panel.
2. In the context menu hover Convert, and in the submenu, select the type to convert to.

Option 2:

1. Double-click the desired task in the Tasks tree or Gantt chart panel.
2. In the sidebar modal that opens, in the Type drop-down list, select the type:

Edit a task

To edit a task (project/milestone):

1. Double-click the desired task in the Tasks tree or Gantt chart panel.
   OR
   In the context menu for the desired task, click Edit.
2. In the right sidebar modal that appears, edit the fields about the task.
3. Click Save.

Delete a task

To delete a task (project/task):

To delete a task, follow one of the procedures below:

Option 1: In the context menu for the desired task, click Delete.

Option 2:

1. Double-click the desired task in the Tasks tree or Gantt chart panel.
2. In the right sidebar modal that appears, click Delete.

Drag-n-drop progress bars (change task dates)

To change the start date of any task, move it by the cental part along the horizontal scale.

To change the task start or end date, move its rightmost and leftmost part (the area is marked with the resizer cursor).

You can also change the task dates in the Edit modal: see Edit a task above.

Change task progress

To change the task progress:

1. Open the Edit task modal by double-clicking a task or selecting Edit in the context menu. See Edit a task above.
2. In the modal, in the Progress field, move the cursor.

Copy&paste tasks

To copy and paste a task:

1. Select a task by clicking it and then in the context menu, click Copy.
2. Click the task after which you want to paste the copied task, and then in the context menu click Paste.

Move and reorder tasks

To move a task up and place it before the previous task, select a task and in the context menu, click Move -> Up

To move a task up and place it after the next task, select a task and in the context menu, click Move -> Down

To reorder tasks, in the Tasks tree, select a task, and drag-and-drop it to the required place in the tree.

Indent and outdent tasks

To demote the nesting level of a task, select it, and then in the context menu click Indent.

To increase the task nesting level, select a task, and then in the context menu click Outdent.

Adding dependency links

There are 4 types of links between activities:

• End to Start
• Start to Start
• End to End
• Start to End

To create links, click the round marker at the edge of the source task bar and then click the marker of the target task bar.

To edit the existing links, open the Edit modal for the desired task (see Edit a task), and in the Predecessors and/or Successors fields, change the link type. To delete a link, in the Edit modal, click the remove button next to the link type.