SharePoint Gantt Chart Web Part

Using Virto Gantt Chart Web Part

Layout of Virto Gantt Chart Web Part

Virto Gantt Chart Web Part consists of header and Gantt chart.

Left part includes list of tasks and the right part shows graphical structure: duration and relations of tasks. When you scroll tasks in the left part, the right part is scrolled accordingly.

Header contains navigation buttons and date picker with currently selected date for quick navigation. Use navigation arrow buttons to go to required month. Or select in the date picker a date to navigate to.

Header of Gantt Chart Web Part has buttons for new task adding and for time scale changing.

When the Gantt Chart Web Part for SharePoint 2013 or 2016 is adjusted, it looks like as follows:

Working with tasks in Virto Gantt Chart Web Part

You can add/delete/move/resize tasks in Virto Gantt Chart Web Part View.

Hover mouse pointer over some task and tooltip with brief task information will appear.

Moving Tasks and changing Task Duration

You can easily change task dates by simple moving. Use your mouse to move tasks to other dates by simple drag and drop. Task resizing (changing start or end date) is also supported as well. Just drag start or end of a task to required date and drop it. The same changes will be done in SharePoint list.

Editing a task

If you need to edit a task, just double click on task and editing/viewing (if data source is read only) form will be displayed. If data source is not read only the task can be also deleted by clicking “Delete” button on editing form.

Deleting a task

Task can be deleted (if data source is not read only) by clicking “X” icon in right upper corner of the task.

Creating a Task

Virto Gantt Chart Web Part for SharePoint Online / SharePoint 2013 allows users to create task right in the Web Part. The same changes will be done in SharePoint list.

Clicking “+ Add task” button will open form for creating new task. First drop down list is used for selecting data source where user wants to add new task.

Type the title (“New task” by default) and define start and end time of your new task.

By default the new task will appear at the end of the list (or on the other position depending of chosen view). The task will appear in the Gantt Chart on the right as well.


When task start date equals task end date the task is displayed as milestone.

If you create new task as described in previous section and define equal start and end date and time, it will be shown as milestone - task with zero duration.

Child task

Sometimes you need to define parent-child relations between tasks in the Gantt Chart Web Part. If tasks list is selected as data source, user can select some task in Virto Gantt Chart Web Part and add child task to it. If task has child task it is displayed as a summary task.

If you want to make selected task a child task (sub-task), highlight the parent task which will contain new child task and use “+ Add child task” button. In this case SharePoint list data source must be also a task list.

You can select more than one task and make all of them child-tasks with “+ Add child task” action.

Predecessor and successor tasks

Virto Gantt Chart Web Part for SharePoint Online / SharePoint 2013 allows users to display successors and predecessors relationship.

Predecessor and successor tasks are connected through arrows. Successor will start after predecessor.

Virto Gantt Chart Web Part allows users to define finish-to-start relations between tasks and create successors and predecessors by simple arrows drag-and-drop. Just click a task that will be a predecessor and drag the arrow to a task which you want to make a successor.

To delete the dependency just click and select the arrow and then press “Delete” on keyboard.


You can easily switch to required timescale in Gantt Chart Web Part. Click “Timescale” and select required scale view for the chart. The following options are available: “Days”, “Weeks”, “Months” and “Year”.


Users assigned to a task are displayed near corresponding tasks in the chart, if this column added to data source view (see Web Part settings to adjust).

Users will be taken from SharePoint list. To assign a new user, just double click task and select required user. The same changes will be done in SharePoint list.

Percent Complete

The percent complete is displayed as different color area of the task body.

Percent complete can be changed by drag & drop percent complete icon.