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
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.
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 *
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.
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
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
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.
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 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.
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.
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.
Try out dhtmlxGantt PRO Edition for Free
By downloading Gantt PRO trial, you get:
30 days of free evaluation
Extended functionality with PRO features
Opportunity to use Gantt Node.js server module
Official technical support
Complete technical guides and samples