How to Create Gantt Chart Component in React Js App

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

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 (

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
npm install react-google-charts

# yarn
yarn add react-google-charts

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' },
    'Find sources',
    new Date(2015, 0, 1),
    new Date(2015, 0, 5),
    'Write paper',
    new Date(2015, 0, 9),
    3 * 24 * 60 * 60 * 1000,
    'Create bibliography',
    new Date(2015, 0, 7),
    1 * 24 * 60 * 60 * 1000,
    'Hand in paper',
    new Date(2015, 0, 10),
    1 * 24 * 60 * 60 * 1000,
    'Outline paper',
    new Date(2015, 0, 6),
    1 * 24 * 60 * 60 * 1000,

class GanttChart extends Component {
  render() {
    return (
      <div className="container mt-5">
        <h2>React Gantt Chart Example</h2>

          loader={<div>Loading Chart</div>}
          rootProps={{ 'data-testid': '1' }}

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 />

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


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.


I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

How to Add Active Class in Map Items in React Js

In this quick tutorial, we will show you how to quite easily add the active…

1 day ago

How to Create and Use Redux Store in React Js

In this tutorial, we will learn how to create a Redux Store in React application.…

4 days ago

How to Build Dynamic Load More Feature in React Js

This detailed guide will cover how to create the Load More button and display data…

1 week ago

How to Integrate Redux Persist to React Redux Store

In this tutorial, we will step by step learn how to configure redux persist in…

1 week ago

React Redux Save Data in Local Storage with Persist Tutorial

In this comprehensive tutorial, we will learn how to persist redux store's states in React…

2 weeks ago

React Js Tailwind CSS Add Light and Dark Mode Toggler Tutorial

In this guide, we are going to learn how to add dark mode and light…

2 weeks ago