DHTMLX announces the release of the brand new Gantt chart libraries for the web development of project management applications in pure React, Svelte, and Vue.js. No external dependencies, no mishmash of libraries and frameworks, just purely native code – hence blazing fast performance and reactivity.
The keynote of the new Gantt charts is their reactivity. There is no time lag between changes applied to properties and rendering them in the chart. Whether you correct task details in the edit form or manipulate tasks in the grid or timeline area, everything is in sync and reacts instantaneously.
Changing the size of scales and cells. View live demo >
React Gantt, Svelte Gantt, and Vue Gantt are essentially blazing fast. They render more than ten thousand tasks in milliseconds. Thus, the user interaction with Gantt charts is quick and smooth-running.
React Gantt with 10 000 tasks. View live demo >
The first release brings out all the essential functionality for creating and managing a project plan with a Gantt chart.
There are three types of tasks available: project, task, and milestone. Tasks can be linked to each other with four types of dependencies: start-to-start, start-to-end, end-to-start, and end-to-end. Tasks can be moved, resized, and interlinked via drag-n-drop.
Example of a basic React Gantt chart with Material skin. View live demo >
The chart can be complemented with vertical markers for illustrating vital dates of the project cycle and tooltips to provide additional information on tasks in the timeline area.
Vertical markers in React Gantt. View live demo >
Tooltips in React Gantt. View live demo >
By default, new Gantt charts are available in two skins: Material and Classic.
React Gantt with Classic skin. View live demo >
The right-hand sidebar appears when double-clicking on a task and contains an editing form for filling in all task details such as task name, description, type, start and end dates, duration, and task relationships. Moreover, there is a slider for setting the progress level of a task in percent.
Double-click a task to open the edit form. View live demo >
All Gantt elements are fully customizable. It’s possible to adjust the configuration of the grid, timeline, and edit form to your requirements. Taskbars can contain any custom HTML content.
Installation via npm
Starting your work with Gantt has never been easier. Just install a free trial version via npm – and get down to implementing Gantt charts in your projects.
We are looking forward to your feedback!