How To Create A Gantt Chart With React And Rowy (2023)

A Gantt chart is a bar chart to visualize and plan tasks and their dependencies in a project. It is particularly useful for product managers and teams because it allows them to easily see the start and end dates of tasks, identify potential delays or conflicts, and make adjustments as needed to keep the project on track.

In this article, we'll learn how to create a Gantt chart with React with data from a Rowy backend template.

Displaying a Gantt chart with React

React is a JavaScript framework that offers a simple and flexible way to create custom web components in an app. It's also the most used frontend framework in the world, so it offers a huge amount fo ready-to-use component libraries: Gantt charts are no exception.

To display a Gantt chart, you can use a library like gantt-task-react that provides a Gantt chart component and helpers to display interactive tasks and progress bars. It's easy to use and offers a lot of customization options:

import React from 'react'
import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react'
import "gantt-task-react/dist/index.css"

const tasks = [
    {
      start: new Date(2020, 1, 1),
      end: new Date(2020, 1, 2),
      name: 'Idea',
      id: 'Task 0',
      type:'task',
      progress: 45,
      isDisabled: true,
      styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },
    },
    ...
];

function App(){
    return (
        <Gantt tasks={tasks} />
    )
}

export default App

This is what the official documentation says the Gantt component looks like:

Now, the hard part isn't so much creating the Gantt chart, but getting the data to display in a dynamic way from a backend database: this is where Rowy comes in.

Gantt chart data source

A Gantt chart requires a set of data to display, so you will need a data source that contains information about the tasks, their start and end dates, and their dependencies. In this example, we'll be using our ready-to-use roadmap template so just copy it to get started.

This template provides a structure for organizing tasks that can be easily adapted to create a Gantt chart to reflect accurate information about your product status:

We just need to modify it a bit to make it compatible with the Gantt chart component. First, we need to add a start and end datetime column to the table to store the start and end dates of each task. We can also add a progress column as a percentage to store the progress of each task:

Rowy is a Firebase CMS, so you can use the Firebase API straight away without any extra configuration to retrieve the data from the React component:

import { useState, useEffect } from 'react'

import { initializeApp } from "firebase/app";
import { 
    getFirestore,
    doc, 
    setDoc,
    collection,
    addDoc
} from "firebase/firestore"; 

const firebaseConfig = YOUR_FIREBASE_CONFIG
const app = initializeApp(firebaseConfig)
const db = getFirestore(app)
const collection_name = "roadmap"

async function getRoadmapTask(){
    const res = await getDocs(getDb(), collection_name) 
    return res.docs.map(doc => {
        const data = doc.data()
        return {
            id: doc.id,
            name: data.name,
            start: new Date(data.start),
            end: new Date(data.end),
            progress: data.progress,
            type: 'task',
            isDisabled: true,
            styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },
        }
    })
}


function App() {

    const [tasks, setTasks] = useState(false);

    useEffect(async () => {
        const data = await getRoadmapTask()

        setTasks(data)
    }, [])

    return (
        <div>
            {tasks && <Gantt tasks={tasks} />}
        </div>
    )
}

export default App;

Finally, we obtain a pretty Gantt chart for our roadmap:

Join The Rowy Community

In summary, a Gantt chart is a powerful tool for project management that allows teams to visualize and plan the schedule of tasks and their dependencies. It can be easily displayed using a React component and a data source such as a roadmap template. With a Gantt chart, project managers and teams can easily identify potential delays or conflicts and make adjustments as needed to keep the project on track.

If you want to learn more about creating useful backend projects, check out more examples from our demo library.