React Js Tutorial- How To Create Gantt Chart Component In React Js App Example

React Gantt Chart Tutorial

Let’s understand first what are Gantt Charts. The React Gantt Charts is a project planning and management tool used to display and manage hierarchical tasks with timeline details.

It helps assess how long a project should take, determine the resources needed, manage the dependencies between the tasks, and plan the order in which the tasks should be completed.

 

In this React tutorial, we will get to know how to create a Gantt Chart component in the app for which we need to employ the React Google Charts Plugin.

In addition, we will see the complete process of embedding the Google Gantt Chart in React app.

 

Let’s start now:

How To Create A Google Gantt Chart In A React Js App

Step 1- Download React App

Step 2- Install Bootstrap Library

Step 3- Add Google Charts Package

Step 4- Implement Gantt Charts In React

Step 5- Register Component In App Js

Step 6- Start React App

 

Step 1- Download React App

In the very first step, we will download a new React App for which we take the help of create-react-app:

npx create-react-app gantt-chart

 

Now, after we have downloaded the new react app, we head over to the app’s root:

cd gantt-chart

 

Step 2- Install Bootstrap Library

Further, we need to install the Bootstrap package for creating the UI components. However, this is optional to follow this step.

Bootstrap is a free and open-source CSS framework focussed on responsive, mobile-first front-end web development.

 

It includes CSS- and JavaScript-based design templates for typography, forms, buttons, navigation and other interface components.

npm install bootstrap

 

In order to take the utter benefit of Bootstrap, components require the library to be imported into the App.js file.

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

 
function App() {
  return (
    <div>

    </div>
  );
}
 
export default App;

 

Step 3- Add Google Charts Package

Without installing the React Google charts package, we will not be able to build the charts. Below given is the command that needs to be invoked to add the package into the React app.

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

 

Step 4- Implement Google Gantt Charts In React

In this step, we will be building Gantt Chart Component.

For this, we have to create the components/GanttChart.js file after which we append the following code in the file:

import React, { Component } from 'react'
import Chart from 'react-google-charts'
const ganttChartData = [
  [
    { type: 'string', label: 'Task ID' },
    { type: 'string', label: 'Task Name' },
    { type: 'date', label: 'Start Date' },
    { type: 'date', label: 'End Date' },
    { type: 'number', label: 'Duration' },
    { type: 'number', label: 'Percent Complete' },
    { type: 'string', label: 'Dependencies' },
  ],
  [
    'Research',
    'Find sources',
    new Date(2015, 0, 1),
    new Date(2015, 0, 5),
    null,
    100,
    null,
  ],
  [
    'Write',
    'Write paper',
    null,
    new Date(2015, 0, 9),
    3 * 24 * 60 * 60 * 1000,
    25,
    'Research,Outline',
  ],
  [
    'Cite',
    'Create bibliography',
    null,
    new Date(2015, 0, 7),
    1 * 24 * 60 * 60 * 1000,
    20,
    'Research',
  ],
  [
    'Complete',
    'Hand in paper',
    null,
    new Date(2015, 0, 10),
    1 * 24 * 60 * 60 * 1000,
    0,
    'Cite,Write',
  ],
  [
    'Outline',
    'Outline paper',
    null,
    new Date(2015, 0, 6),
    1 * 24 * 60 * 60 * 1000,
    100,
    'Research',
  ],
]
class GanttChart extends Component {
  render() {
    return (
      <div className="container mt-5">
        <h2>React Gantt Chart Example</h2>
        <Chart
          width={'700px'}
          height={'410px'}
          chartType="Gantt"
          loader={<div>Loading Chart</div>}
          data={ganttChartData}
          rootProps={{ 'data-testid': '1' }}
        />
      </div>
    )
  }
}
export default GanttChart

 

Step 5- Register The Component In APp Js

Here, we will update the GanttChart class or component in the App.js file using the below code:

import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import GanttChart from './components/GanttChart'
function App() {
  return (
    <div className="App">
      <GanttChart />
    </div>
  )
}
export default App

 

Step 6- Start React App

In this step, the Gantt chart integration process has been completed. Now that, we have to see how does the chart looks on the browser.

For that, we need to evoke the development server starting command:

npm start

 

Summary

Friends, in this, React js Gantt Chart tutorial, we have learned how to install and configure react google charts in react app. In addition, we have seen how to create google Gantt charts components with step-by-step information.

 

Thanks