How to Create Gantt Chart Component in React 18 App

Last Updated on March 4, 2024 by Digamber in React JS

React Gantt chart tutorial; Gantt charts are significantly important for the information.

A series of horizontal lines display the amount of work executed in a specific amount of time in conjunction with the amount purposed for those periods.

In this tutorial, we will help you understand how to create a Gantt chart component in React application.

To add the Gantt chart in React, we will employ the React Google charts plugin.

Additionally, we will, bit by bit, show you the entire process of embedding the Google Gantt chart in react app.

Without further ado, lets start creating the react Gantt chart component.

React Js Google Gantt Charts Example

• 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

Download React App

This step for those who haven’t created the React app, you may use the create-react-app command to download a new react app.

npx create-react-app gantt-chart

After executing the above command, head over to app’s root.

cd gantt-chart

Install Bootstrap Library

If you don’t want to waste time styling the UI, you may use the Bootstrap library in your react app.

We are using it to define the grid; however, you may use this library to create the entire app’s user interface.

npm install bootstrap --legacy-peer-deps

To use it you must import the bootstrap css before the app function in 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;

Add Google Charts Package

The core feature of this tutorial lies on react google charts package.

Make sure to run the provided command from the command prompt.

npm install react-google-charts --legacy-peer-deps

Implement Gantt Charts in React

Now, we will share the easy way to build the Gantt chart component.

For that we must create the components/GanttChart.js file, after that append the given 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

The ganttChartData variable holds the dummy data that we are going to use for eloquent chart information.

Use the Chart tag, pass the width, height, chartType and other essential properties.

Register Component in App Js

Further, we will update the GanttChart class or component in the App.js file.

Ensure that your app js file looking similar to the given file.

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

Start React App

How does the chart look? Well, for that you have to start the react app. Here is the command that will evoke the react server for you.

npm start

Conclusion

Google charts are a developer-friendly library for creating and displaying data in charts.

This interactive charts library helps you create charts for browsers and mobile devices simultaneously.

In this tutorial, we learned how to use React Google charts package in React; we also built the simple Gantt chart and showed you the relation of information using static data.

We have given you the basic example of Gantt chart, however you may check out some more stuff here.