Description:
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:
