Overview of Syncfusion React Gantt Chart Component

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.

Setting up a development environment

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.

Configuring Gantt Chart in a React application

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

Themes in Gantt Chart

The following themes are available to paint the Gantt Chart as per your website theme preference:

• Material
• Bootstrap
• Fabric
• High contrast

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">

Initializing Gantt Chart

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;

Defining task details to Gantt Chart

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
        }
      ]
    }
  ];

Mapping task properties to Gantt Chart

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.

In this application, you’ll map some important fields alone to the Gantt Chart component.

Running the application

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

React Gantt Chart in a React application

Injecting modules

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.

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.

Defining timeline settings

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.

Defining timeline settings in React Gantt Chart

Sorting

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.

Using the sorting feature in React Gantt Chart

Filtering

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 the filtering feature in React Gantt Chart

Day markers

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>

Using day markers in React Gantt Chart

Selection

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>

Using the selection support in React Gantt Chart

Managing tasks

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>

Managing tasks in React Gantt Chart

GitHub sample

You can get the final application from this GitHub repository.

Conclusion

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!

The post Overview of Syncfusion React Gantt Chart Component appeared first on Syncfusion Blogs.