Gantt Chart Feature Details

This page describes the Standard functionality of our JS Gantt chart. If you want to find out which extra features are available in the PRO edition, take a look at this guide.

Rich drag-and-drop behavior

Drag-and-drop functionality enables users to quickly change the start/end dates of the tasks and their duration as well as create new tasks directly in the timeline by clicking on an empty area to set the start date and dragging to the right to define its duration. You can forbid dragging of specific tasks, limit the area for dragging, set minimal task duration, and control the autoscroll behavior during tasks' dragging.

Multi-task selection

With dhtmlxGantt, you can apply different operations to multiple tasks at once. The multi-task selection feature allows choosing several tasks by holding Ctrl or Shift key and dragging selected items horizontally across the timeline. Moreover, you can add hierarchy to your project and transform tasks to sub-tasks and vice versa.

Inline editing

You can use built-in editors to allow your users to make any changes in the grid area. They will be able to create and update tasks, set connections between them, define the start and end dates, and modify task duration.

setting working time in minutes

Setting working time in minutes

You can change the default working time measured in hours and days. Thus, your users will be able to specify their working period also in minutes, for instance, starting at 08:15 am and finishing at 12:45 pm.

Backward scheduling

In addition to the default forward planning strategy, dhtmlxGantt users can set backward scheduling that helps them focus on their project's time frame. Backward planning implies that tasks are scheduled from the end of the project with a focus on the entire project's deadline.

unscheduled tasks gantt chart

Support for unscheduled tasks

With dhtmlxGantt, your users can add tasks without start and end dates. However, the system will assign default dates to these unscheduled tasks.

smart rendering

Smart rendering

The smart rendering functionality allows significantly enhancing the speed of data visualization, especially while working with big data sets. This mode is responsible for rendering only the elements visible on the screen at the moment.

right to left mode

RTL mode

DHTMLX Gantt library supports right-to-left rendering, thus allowing you to change the direction of the time scale in the timeline and the order of rows in the grid. All the chart elements will begin from the right and continue to the left side of the chart.

tooltips javascript

Tooltips

By default, tooltips are added to tasks, however, you can set a tooltip for any other Gantt elements. Tooltip behavior is completely customizable. You can configure the time of tooltips showing and hiding, change the position, and add custom text.

Tasks filtering

Our Gantt chart library supports client-side filtering. You can set filtration to display tasks with specific priority (e.g. high, normal, and low) or tasks assigned to a specific employee. Moreover, your Gantt chart may contain a text filter so users can type something and see only the tasks that match their search criteria.

sorting columns in gantt chart

Sorting columns

You can enable your users to sort data in the grid. Once a user clicks on the header of a column, the Gantt chart displays a special control indicating the sorting direction. Each next mouse click on the header changes the sorting direction to ascending or descending. However, you can apply custom sorting functions.

Scrolling the timeline with the mouse

With dhtmlxGantt, your users will be able to quickly scroll the timeline using mouse click and drag.

Keyboard navigation

dhtmlxGantt includes keyboard navigation and provides access to all its elements via keys or key combinations. You can use ready shortcuts or create custom ones and attach different actions to different elements.

gantt chart import and export

Multiple export/import possibilities

dhtmlxGantt library supports a large number of formats to export and import Gantt charts: PNG, PDF, Excel, iCal, MS Project, and Primavera6. By default, you can use a free online export service. The output PDF and PNG files will contain a DHTMLX watermark unless you buy a license. You can also export Gantt charts locally by ordering and installing a local export module on your computer.

highlighting cells in gantt chart

Highlighting specific time slots

To draw users' attention to specific timeline areas, you may highlight the cells. For example, you can mark weekends to visually divide the scale into weeks.

gantt with predefined skins

7 different skins

dhtmlxGantt provides 7 predefined skins that you can use and customize according to your project needs. For example, you may apply the Material skin to change the overall look and feel of your Gantt chart.

gantt chart accessibility

Accessibility

To make easier access and interaction with DHTMLX Gantt for people with disabilities, you can use WAI-ARIA attributes, add keyboard navigation, and apply one of the high-contrast themes.