The Syncfusion React Gantt Chart is a modern web component for visualizing a project’s status and activities in a webpage. Using this, we can schedule the task activities of a project, track the status of those activities, and track resource allocation in projects. We can also manage the project activities, like update the values and add and delete the activities. The Gantt Chart component is built based on modular architecture, so we can load feature modules on demand.
In this article, we are going to learn how to use the Syncfusion Gantt Chart component in a React application and how to inject feature modules such as sorting, filtering, editing, and day markers.
Let’s use create-react-app to create a React application with basic configuration. For this, you need to install the create-react-app CLI. You’ll use the following command.
npm install -g create-react-app
Then, create a new React application using the following command.
create-react-app react-gantt
Here, react-gantt is the name of an application, and you can name it as you wish. Ensure that your application has been created properly by running the application using the following command.
npm start
While running this command, the React application will be launched in the browser with localhost:3000 URL.
Now, the React application is ready, and you can configure the Gantt Chart component in it. The Gantt Chart component is available in the @syncfusion/ej2-react-gantt package.
Install this package in the React application. You can do this using the following command.
npm install @syncfusion/ej2-react-gantt --save
The following themes are available to paint the Gantt Chart as per your website theme preference:
Gantt Chart has some subcomponents. To apply a theme to the component, add theme files from the node-modules folder for all the components. Or load it from a single theme file for all the Syncfusion components. Here, we are going to reference a common theme file for all the components. In this sample, we are going to add Material theme in the index.html file.
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
We have configured the packages and themes to render Gantt Chart in this application, and now we can initialize the component using the following code snippet in the App.js file.
import React from 'react';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
function App() {
return (
<div>
<GanttComponent></GanttComponent>
</div>
);
}
export default App;
To render the Gantt Chart component, we need to define a data source and basic properties to it. The data source object should contain minimal fields such as ID, start date, and end date to render the Gantt Chart. The data source can be an array of JavaScript objects or remote data. To keep this application simple, we are going to reference a JavaScript array of objects as the data source. Add the data source in the App.js file itself, and use the dataSource property to pass it to the Gantt Chart component.
const dataSource = [
{
taskID: 1,
taskName: "Planning",
startDate: new Date("02/06/2019"),
subtasks: [
{
taskID: 2,
taskName: "Plan timeline",
startDate: new Date("02/04/2019"),
duration: 5,
progress: 100
},
{
taskID: 3,
taskName: "Plan budget",
startDate: new Date("02/07/2019"),
duration: 5, progress: 100
},
{
taskID: 4,
taskName: "Allocate resources",
startDate: new Date("02/10/2019"),
duration: 5,
progress: 100
},
{
taskID: 5,
taskName: "Planning complete",
startDate: new Date("02/13/2019"),
duration: 0,
progress: 0
}
]
}
];
You have prepared the data source for the Gantt Chart component, and now you should map important fields from the data source to it. This can be done using the taskFields property. The taskFileds property has the following fields to map value from the data source.
| Mapping properties | Usages |
| id | This field acts as the primary key, used for predecessor mapping and CRUD operations. |
| name | Maps the name of the task to Gantt Chart from the data source. |
| parentID | Maps the parent ID of a task to Gantt Chart, used while using a self-referential data source. |
| startDate | Maps the start date of a task to Gantt Chart from the data source. |
| endDate | Maps the end date of a task to Gantt Chart from the data source. |
| dependency | Maps the predecessor of a task to Gantt Chart from the data source. |
| progress | Maps the completion of a task to Gantt Chart in a percentage. |
| child | Maps the child collection of tasks to Gantt Chart from a data source. |
| Milestone | Maps whether a task is a milestone or not from data source to Gantt Chart. |
| duration | Maps duration of a task from the data source to Gantt Chart. |
| durationUnit | Maps duration units such as hour, day, and minute values of a task from the data source to Gantt Chart. |
| cssClass | Maps custom CSS classes of a task from the data source to Gantt Chart. This is used to customize the task row and taskbar elements. |
| baselineStartDate | Maps baseline’s start date of a task from the data source to Gantt Chart. |
| baselineEndDate | Maps baseline’s end date of a task from the data source to Gantt Chart. |
| resourceInfo | Maps resources assigned for a task from the data source to Gantt Chart. |
| expandState | Maps expand status of a task to the Gantt Chart. It will be useful for parent tasks alone. |
| indicators | Maps indicator elements for tasks from the data source. |
| notes | Maps notes for tasks from the data source. |
In this application, you’ll map some important fields alone to the Gantt Chart component.
| Task field property names | Data source fields |
| Id | taskID |
| startDate | startDate |
| duration | duration |
| name | taskName |
| progress | progress |
This application can be run using the following command. While running the command, the application will be launched in the browser with the port number 3000.
npm start
The Gantt Chart component is built based on modular architecture, so we can import and use just required features in our applications. The component has the following feature modules.
| Module Name | Usages |
| Edit | Performs add, edit, and delete actions. |
| Column reorder | Reorders the columns through user interaction. |
| Column resize | Resizes the column width dynamically through user interaction. |
| Filter | Performs a filter action on available tasks. |
| Sort | Sorts the records based on various fields like ID, start date, and duration. |
| Selection | Performs cell selection and row selection. |
| Toolbar | Includes toolbar control with various items. |
| Day markers | Renders holidays, weekend days, and event markers. |
| Context menu | Performs add, edit, and delete actions through a context menu. |
| Excel export | Exports task data as Excel files. |
| Column menu | Enables a column menu option. Using this, we can sort, filter, and update the visibility of columns dynamically. |
Feature modules can be injected using the Inject component, and this component is available in the Syncfusion React Gantt Chart package. The following code snippet demonstrates how to inject feature modules using the Inject component.
import { GanttComponent, Inject, Sort } from '@syncfusion/ej2-react-gantt';
//...
<GanttComponent dataSource={dataSource} taskFields={taskFields} height="350px"
allowSorting={true}
>
<Inject services={[Sort]} />
</GanttComponent>
In this article, we are also going to discuss some important modules and features available in Gantt Chart.
The Syncfusion React Gantt Chart component provides various options to customize its timeline. In this component, we can make a timeline a single tier or double tier, render a timeline with various timescale units (minute, hour, day, week, month, year, and decade), and combine the timescale units per cell with the required count. We can also specify the required format for the top and bottom timeline cells. By default, Gantt Chart’s timeline has the week unit at the top and the day unit on the bottom tier. In this application, we will make the timeline’s top tier the day unit, the timeline’s bottom tier the hour unit, and combine the hour unit cells with eight hours.
//...
const timelineSettings = {
topTier: {
unit: 'Day',
format: 'dddd MMM yyyy'
},
bottomTier: {
unit: 'Hour',
count: 8,
format: 'H'
}
};
return (
<div>
<GanttComponent dataSource={dataSource} taskFields={taskFields} height="350px"
timelineSettings={timelineSettings}
>
</GanttComponent>
</div>
);
Refer to this documentation to learn more about the timelineSettings of the Gantt Chart.
The sorting feature is used to reorder records in ascending or descending order based on fields such as ID, start date, duration, and progress. To enable the sorting feature, you need to inject the Sort module in Gantt and set the allowSorting property to true. Sorting action is performed by clicking the required column header in the grid. On first click, records will be sorted in ascending order. On second click, records will be sorted in descending order. On third click, sorting is cleared for that specific column.
import { GanttComponent, Inject, Sort } from '@syncfusion/ej2-react-gantt';
//...
<GanttComponent dataSource={dataSource} taskFields={taskFields} height="350px"
allowSorting={true}
>
<Inject services={[Sort]} />
</GanttComponent>
Gantt tasks can be loaded in a sorted order by default by specifying the sortSettings.columns property.
This feature is used to render just a required task based on some conditions. Gantt Chart has built-in support to filter tasks by using the filter menu. This can be enabled by injecting the Filter module in Gantt by setting the allowFiltering property to true. When we enable the filter feature, the filter icon will be added in all columns’ header cells. We can open the filter menu by clicking this icon. In this filter menu, we can specify conditions and values, initialize the filter action using the filter button, and clear previous filtering using the clear button. The filter menu will vary based on column data type: for a task name column, the menu will be based on string values; and for start date and end date columns, the menu will be based on date values.
import { GanttComponent, Inject, Filter } from '@syncfusion/ej2-react-gantt';
//...
<GanttComponent dataSource={dataSource} taskFields={taskFields} height="350px"
allowFiltering={true}
>
<Inject services={[Filter]} />
</GanttComponent>
Gantt Chart can be loaded with filtered tasks by specifying values in the filterSettings.columns property.
Using this module, we can represent holidays, event markers, and weekend days in the Gantt Chart. Holidays during the project timeline are specified using the holidays property. Event marker support is used to represent some important date and stages, and this can be defined using the eventMarkers property. Weekend days can be highlighted using the highlightWeekends property. We can define weekends by using the workWeek property, and days that are not included in the workWeek property are considered weekend days.
import { GanttComponent, Inject, DayMarkers } from '@syncfusion/ej2-react-gantt';
//...
<GanttComponent dataSource={dataSource} taskFields={taskFields} height="350px"
highlightWeekends={true}
holidays={holidays}
eventMarkers={eventMarkers}
>
<Inject services={[Sort, Filter, DayMarkers]} />
</GanttComponent>
This support is used to select a task and perform some action on it like edit and delete. We can get selected tasks dynamically from the Gantt Chart component and use them based on our requirements. Gantt supports row and cell selection, as well as multiple selection. To enable the selection support, we need to inject the Selection module, and set the allowSelection property to true. We can configure the selection mode to row or cell, and the selection type to single or multiple by using the selectionSettings property. In this application, we will enable row selection with multiple selection support.
import {
GanttComponent, Inject, Selection
} from '@syncfusion/ej2-react-gantt';
//...
const selectionSettings = {
mode: 'Row',
type: 'Multiple'
};
//...
<GanttComponent dataSource={dataSource} taskFields={taskFields} height="400px"
allowSelection={true}
selectionSettings={selectionSettings}
>
<Inject services={[Selection]} />
</GanttComponent>
Syncfusion React Gantt Chart provides various options to manage tasks. We can perform add, edit, and delete actions by using the toolbar, context menu, keyboard shortcuts, and public methods. To perform add, edit, and delete actions, we need to inject the Edit module in Gantt Chart, and we need to enable these actions using the editSettings property. Gantt provides various options to edit task values: cell editing, dialog editing, and taskbar editing. Cell editing and dialog editing are controlled by the editSettings.mode property, and taskbar editing is enabled or disabled using the editSettings.allowTaskbarEditing property. As we said earlier, we can use toolbar and context menu for managing the task, so in this application, we will enable the toolbar and context menu. These options are available as separate modules, so we need to import them to our application.
import {
GanttComponent, Inject,
Edit, Toolbar, ContextMenu, Selection
} from '@syncfusion/ej2-react-gantt';
//...
const editSettings = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
mode: 'Dialog'
};
const toolbarItems = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll'];
//...
<GanttComponent dataSource={dataSource} taskFields={taskFields} height="400px"
editSettings={editSettings}
toolbar={toolbarItems}
enableContextMenu={true}
allowSelection={true}
>
<Inject services={[Edit, Toolbar, ContextMenu, Selection]} />
</GanttComponent>
You can get the final application from this GitHub repository.
In this article, we have learned how to integrate the Syncfusion React Gantt Chart component in a React application, learned about some important features available in Gantt, and how to use these features in an application. The Gantt Chart control has some other features, like resource allocation, baseline, unscheduled task, Excel export, indicators, column reorder, and column resizing. To learn more about the Syncfusion Gantt Chart component, refer to this sample browser and documentation.
If you have any questions, please let us know in the comments section. You can also contact us through our support forum or Direct-Trac. We are happy to assist you!