Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-gantt-chart

NikitaSmithTheOne1.2kMIT0.3.0-rc.11TypeScript support: included

Logo

react, gantt, chart, svg, gantt chart, project management, interactive, interactive gantt

readme

Logo

react-gantt-chart

npm NPM GitHub Workflow Status (branch) GitHub Workflow Status (branch) GitHub Workflow Status (branch)

React-Gantt-Chart allows you to create custom gantt charts with ease. No more nonsense!

Installation

npm install --save react-gantt-chart
yarn add react-gantt-chart
pnpm add react-gantt-chart

Features

  • Easy to set up for real
  • Super easy to customize 🔥
  • RTL support
  • Easy to create your own templates
  • Small bundle size
  • Support ESM and CJS
  • Zero dependencies
  • And much more!

The gist

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

const App = () => {
    const [tasks] = React.useState<Task[]>([
        {
            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;

So easy! Is not it? ✨

❗❗❗ Important Note: The package is not production ready yet! I believe within close future it'll be ready so now you can try this out and share your feedback. Thanks!

Demo

A demo is worth a thousand words

Storybook

Check the storybook to see all components!

Contributing

Contributions are always welcome! Show your ❤️ and support by giving a ⭐.

Take a look at the contributing guide:

  • Fork the repository
  • Run scripts
npm i
npm run lib:build -- -w
npm run lib:link
npm run start # check examples
npm run storybook # check storybook

So now you are ready to make the world better place!

Roadmap

  • Make more built-in gantt chart templates
  • Simplify some components props and make the ones memoized

Release Notes

You can browse them all here

License

Licensed under MIT

Authors

Logo

changelog

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

0.3.0-rc.11 (2022-03-28)

Refactoring

  • 💡 Arrow: drownPathAndTriangle func refactor (11e1e0e)
  • 💡 Arrow: drownPathAndTriangleRTL func refactor (f727b65)

Performance

  • ⚡️ Arrow: all required props are primitive + memo (c276555)

0.3.0-rc.10 (2022-03-25)

Documentation

  • ✏️ package.json: +MIT license (a67b4cb)

0.3.0-rc.9 (2022-03-25)

Documentation

  • ✏️ +LICENSE.md (4ec9eb3)
  • ✏️ package.json: +extra keywords (b8a6704)
  • ✏️ readme init description (1608695)
  • ✏️ readme: +demo section (66882ec)
  • ✏️ readme: +gist (366c778)
  • ✏️ readme: +logos (fe54b62)
  • ✏️ readme: +not production ready note (1947325)
  • ✏️ readme: +storybook section (26088bd)
  • ✏️ readme: +workflows badges (278340e)
  • ✏️ readme: show gist as typescript code (73b1654)

0.3.0-rc.8 (2022-03-24)

Features

Refactoring

  • 💡 date helper typings refactor (5d1cdb8)
  • 💡 improvement of library exports (5507e27)
  • 💡 update examples exports (1cdcbf5)

0.3.0-rc.7 (2022-03-23)

Bug Fixes

  • 🐛 package.json: engines.node version update (ca6eb4a)

Testing

  • 💍 +GanttNR render w/o errors test (585f2b3)
  • 💍 +GanttOriginal render w/o errors test (6cd4825)

0.3.0-rc.6 (2022-03-22)

Refactoring

  • 💡 GanttOriginal optional props refactor (de98fda)

Documentation

  • ✏️ storybook: +GanttNR multi bar row story (d30266d)
  • ✏️ storybook: +GanttNR stories (2bd631c)
  • ✏️ storybook: +GanttOriginal stories (000c08c)
  • ✏️ storybook: Bar stories improvement (b6d3f38)
  • ✏️ storybook: BarDateHandle stories improvement (614c34c)
  • ✏️ storybook: BarDisplay stories improvement (60e01b2)
  • ✏️ storybook: BarNR stories improvement (e005287)
  • ✏️ storybook: BarOriginal stories improvement (1b071b2)
  • ✏️ storybook: BarProgressHandle stories improvement (448ca36)
  • ✏️ storybook: BarSmall stories improvement (a2d73cd)
  • ✏️ storybook: Calendar stories improvement (25ee741)
  • ✏️ storybook: Calendar stories improvement (f1e2c83)
  • ✏️ storybook: CalendarHeader stories improvement (9dd09ce)
  • ✏️ storybook: delete useless stories (c7a5a66)
  • ✏️ storybook: Grid stories improvement (521cb15)
  • ✏️ storybook: MileStone stories improvement (7750489)
  • ✏️ storybook: Project stories improvement (99a4e9d)
  • ✏️ storybook: remove useless stories (43a8d00)
  • ✏️ storybook: TaskItemNR stories improvement (2e44e1a)
  • ✏️ storybook: TaskItemOriginal add default props to args (c52cc61)
  • ✏️ storybook: TaskItemOriginal stories improvement (3c1f267)
  • ✏️ storybook: TaskList stories improvement (2c51ce0)
  • ✏️ storybook: TaskListHeader stories improvement (8c37847)
  • ✏️ storybook: TaskListTable stories improvement (9b0febc)

Styling

  • 💄 GanttOriginal: taskListHeader fint size update (90ae9ba)

0.3.0-rc.5 (2022-02-28)

Refactoring

  • 💡 Grid refactor (d498277)
  • 💡 MileStone cmp is moved into Bars (f46124d)
  • 💡 Project cmp is moved into Bars (ca04b2e)

Documentation

  • ✏️ storybook: Arrow --> +truthy rtl example (bf84689)
  • ✏️ storybook: Arrow stories improvement (0b504a7)
  • ✏️ storybook: HorizontalScroll stories improvement (0db91fd)
  • ✏️ storybook: MileStone + Project titles update (261b4f6)
  • ✏️ storybook: VerticalScroll stories improvement (cdedb51)

0.3.0-rc.4 (2022-02-28)

Documentation

  • ✏️ storybook: bar containers title change (7c171b8)
  • ✏️ storybook: calendar containers title change (4f5acc1)
  • ✏️ storybook: change lib components titles (ff7a0fe)
  • ✏️ storybook: grid containers title change (2f25501)
  • ✏️ storybook: task item containers title change (ea3b104)
  • ✏️ storybook: task list table containers title change (438b014)

Performance

  • ⚡️ decrease bundle size: -source and declaration maps (826a890)

0.3.0-rc.3 (2022-02-25)

0.3.0-rc.2 (2022-02-24)

Features

  • 🎸 Gantt: +multi bar row (074bcf2)

0.3.0-rc.1 (2022-02-22)

0.3.0-rc.0 (2022-02-21)

Features

  • 🎸 +BarNationalResources component (b1379a5)
  • 🎸 storybook: +Bar component (eb33b4b)

Bug Fixes

  • 🐛 bar component import fix (probably...) (c752511)
  • 🐛 TaskList horizontal scroll fix (1ff2a6e)

0.2.0 (2022-02-10)

Features

  • 🎸 +Arrow component (31a5046)
  • 🎸 +Calendar cnt (ecd53f3)
  • 🎸 +Gantt component (0e77003)
  • 🎸 +GanttTask component (10d537e)
  • 🎸 +GanttTaskContent component (9ec4376)
  • 🎸 +Grid components (178c3ae)
  • 🎸 +HorizontalScroll component (2be3ae6)
  • 🎸 +TaskItem cnt (f5e9cb6)
  • 🎸 +TaskList components (514ecb0)
  • 🎸 +Tooltip component (62f1c50)
  • 🎸 +VerticalScroll component (d9f0183)
  • 🎸 first gantt chart example (284e5a1)

Bug Fixes

  • 🐛 styles imports fix (d31cc03)