How To Create Gantt Chart In React Js

In this article, we will learn how to create Gantt Chart in react js.

– First of all, we have to create a react application.

–  Then import the below package into your project.

npm install @syncfusion/ej2-react-gantt

–  Adding CSS reference

– Add components style as given below in src/App.css.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-gantt/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css';
@import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css';

-Now open your app.js file and add the below code:

import React from 'react'
import './App.css';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Edit, CriticalPath, Toolbar, Filter, Selection } from '@syncfusion/ej2-react-gantt';
import { HierarchyData } from './data';

const App = () => {

    const taskValues = {
        id: "TaskID",
        name: "TaskName",
        startDate: "StartDate",
        endDate: "EndDate",
        duration: "Duration",
        progress: "Progress",
        child: "subtasks",
        dependency: "Predeceesor"
    }

    const editOptions = {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    };

    const toolbarOptions = ['Add', 'Edit', 'Delete', 'Cancel', 'Update', 'PrevTimeSpan', 'NextTimeSpan', 'ExpandAll', 'CollapseAll', 'Search', 'Indent', 'Outdent'];

    return (
        <div>
            <GanttComponent
                dataSource={HierarchyData}
                taskFields={taskValues}
                enableCriticalPath={true}
                editSettings={editOptions}
                toolbar={toolbarOptions}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="ID"></ColumnDirective>
                    <ColumnDirective field="TaskName" headerText="Name"></ColumnDirective>
                    <ColumnDirective field="StartDate" format="dd-MMM-yy"></ColumnDirective>
                    <ColumnDirective field="Duration" textAlign="Right"></ColumnDirective>
                </ColumnsDirective>
                <Inject services={[Edit, CriticalPath, Toolbar, Filter, Selection]} />
            </GanttComponent>
        </div>
    )
}

export default App

-Now create data.js file and add the below code:

Object.defineProperty(exports, "__esModule", { value: true });
exports.HierarchyData = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
        ]
    }
];

Output: