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