Custom Gantt Chart Component For React

A Gantt chart is a project scheduling tool. They exist to help you plan projects and to deliver your work product in a timely manner.

This is a React component that makes it easy to create simple, lightweight, customizable Gantt charts for React applications.

How to use it:

1. Install and import the Gantt chart components.

# Yarn
$ yarn add react-gantt-chart

# NPM
$ npm i react-gantt-chart

import React from "react";
import { GanttOriginal, Task, ViewMode } from "react-gantt-chart";

2. Create a basic Gantt chart in your app.

const App = () => {
  const [tasks] = React.useState<Task[]>([
    // data here
    {
      type: "project",
      id: "ProjectSample",
      name: "1.Project",
      start: new Date(2021, 6, 1),
      end: new Date(2021, 9, 30),
      progress: 25,
      hideChildren: false,
    },
    {
      type: "task",
      id: "Task 0",
      name: "1.1 Task",
      start: new Date(2021, 6, 1),
      end: new Date(2021, 6, 30),
      progress: 45,
      project: "ProjectSample",
    },
    {
      type: "task",
      id: "Task 1",
      name: "1.2 Task",
      start: new Date(2021, 7, 1),
      end: new Date(2021, 7, 30),
      progress: 25,
      dependencies: ["Task 0"],
      project: "ProjectSample",
    },
    {
      type: "task",
      id: "Task 2",
      name: "1.3 Task",
      start: new Date(2021, 6, 1),
      end: new Date(2021, 7, 30),
      progress: 10,
      dependencies: ["Task 1"],
      project: "ProjectSample",
    },
    {
      type: "milestone",
      id: "Task 6",
      name: "1.3.1 MileStone (KT)",
      start: new Date(2021, 6, 1),
      end: new Date(2021, 6, 30),
      progress: 100,
      dependencies: ["Task 2"],
      project: "ProjectSample",
    },
  ]);
  return (
    <GanttOriginal
      tasks={tasks}
      viewMode={ViewMode.Month}
      columnWidth={200}
      ganttHeight={200}
    />
  );
};
export default App;

Preview:

Download Details:

Author: NikitaSmithTheOne

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/NikitaSmithTheOne/react-gantt-chart

License: MIT