How to Implement Gantt Chart in ReactJS? - Coding

Gantt charts are used to visualize project schedules, timelines, and dependencies. In ReactJS, implementing a Gantt chart involves integrating libraries like dhtmlx-gantt or react-google-charts and structuring task data with start dates, durations, and progress indicators.

Prerequisites

We will explore these approaches to implement Gantt Chart in ReactJS:

Table of Content

Using react-google-charts
Using dhtmlx-gantt

Steps to Setup a React App

Step 1: Create a ReactJS application by using this command.

npx create-react-app myapp

Step 2: Navigate to the project directory

cd myapp

Step 3: Install the required packages using below command:

npm install react-google-charts dhtmlx-gantt

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "dhtmlx-gantt": "^8.0.8",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-google-charts": "^4.0.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Using react-google-charts

In this approach, we are using the react-google-charts library to create a Gantt chart in ReactJS. The chart data is structured in an array format, including task details such as Task ID, Task Name, Start Date, End Date, Duration, Percent Complete, and Dependencies.

Example: The below example uses react-google-charts to Implement Gantt Chart in ReactJS.

JavaScript

// App.js

import React from 'react';
import { Chart } from 'react-google-charts';

const App = () => {
    const data = [
        [
            { type: 'string', label: 'Task ID' },
            { type: 'string', label: 'Task Name' },
            { type: 'string', label: 'Resource' },
            { type: 'date', label: 'Start Date' },
            { type: 'date', label: 'End Date' },
            { type: 'number', label: 'Duration' },
            { type: 'number', label: 'Percent Complete' },
            { type: 'string', label: 'Dependencies' },
        ],
['1', 'GeeksforGeeks Course Planning', 'Planning', new Date(2024, 5, 1), new Date(2024, 5, 5), null, 100, null],
['2', 'Content Creation', 'Writing', new Date(2024, 5, 6), new Date(2024, 5, 20), null, 50, '1'],
['3', 'Review and Editing', 'Editing', new Date(2024, 5, 21), new Date(2024, 5, 25), null, 25, '2'],
['4', 'Final Approval', 'Approval', new Date(2024, 5, 26), new Date(2024, 5, 30), null, 0, '3'],
    ];

    const options = {
        height: 400,
        gantt: {
            criticalPathEnabled: true,
            criticalPathStyle: {
                stroke: '#e64a19',
                strokeWidth: 5,
            },
            trackHeight: 30,
        },
    };

    return (
        <div style={{ fontFamily: 'Arial, sans-serif' }}>
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
            <h3>Using react-google-charts</h3>
            <Chart
                chartType="Gantt"
                width="80%"
                data={data}
                options={options}
            />
        </div>
    );
};

export default App;

Output:

Using dhtmlx-gantt

In this approach, we are using the dhtmlx-gantt library to implement a Gantt chart in ReactJS. The useEffect hook initializes the Gantt chart using gantt.init(‘gantt_here’) and parses the data for tasks with specific details like start date, duration, and progress.

Example: The below example uses dhtmlx-gantt to Implement Gantt Chart in ReactJS.

JavaScript

// App.js

import React, { useEffect } from 'react';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import gantt from 'dhtmlx-gantt';

const App = () => {
    useEffect(() => {
        gantt.init('gantt_here');
        gantt.parse({
            data: [
{ id: 1, text: 'GeeksforGeeks Course Planning', start_date: '2024-06-01', duration: 5, progress: 1 },
{ id: 2, text: 'Content Creation', start_date: '2024-06-06', duration: 15, progress: 0.5, parent: 1 },
{ id: 3, text: 'Review and Editing', start_date: '2024-06-21', duration: 5, progress: 0.25, parent: 2 },
{ id: 4, text: 'Final Approval', start_date: '2024-06-26', duration: 5, progress: 0, parent: 3 },
            ],
        });
    }, []);

    return (
        <div>
            <h1 style={{ color: 'green', textAlign: 'center' }}>GeeksforGeeks</h1>
            <h3 style={{ textAlign: 'center' }}>Using dhtmlx-gantt</h3>
            <div id="gantt_here" style={{ width: '40%', height: '200px', margin: 'auto' }}></div>
        </div>
    );
};

export default App;

Output:

using dhtx-gantt

Reffered: https://www.geeksforgeeks.org

JavaScript

Related
How to Fix "Cannot read property 'click' of null" in JavaScript?
Check Symmetrical Binary Tree using JavaScript
JavaScript Program to Print all Nodes that do not have any Siblings
Print the nodes having exactly one child in a Binary tree using JavaScript
Moment.js

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	15