{"id":15633654,"url":"https://github.com/clayrisser/react-gantt","last_synced_at":"2026-03-16T15:04:36.799Z","repository":{"id":65474247,"uuid":"64169942","full_name":"clayrisser/react-gantt","owner":"clayrisser","description":"A gantt chart for react","archived":false,"fork":false,"pushed_at":"2024-05-27T19:22:28.000Z","size":3189,"stargazers_count":149,"open_issues_count":11,"forks_count":40,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-07T06:48:50.693Z","etag":null,"topics":["gantt","gantt-chart","react","timeline"],"latest_commit_sha":null,"homepage":"https://codejam.ninja","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clayrisser.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-07-25T21:44:21.000Z","updated_at":"2025-02-24T04:52:07.000Z","dependencies_parsed_at":"2024-05-27T22:37:05.437Z","dependency_job_id":"7b3e48a1-2e6b-41d3-a4ee-4c6112ce91cd","html_url":"https://github.com/clayrisser/react-gantt","commit_stats":null,"previous_names":["codejamninja/react-gantt"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clayrisser%2Freact-gantt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clayrisser%2Freact-gantt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clayrisser%2Freact-gantt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clayrisser%2Freact-gantt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clayrisser","download_url":"https://codeload.github.com/clayrisser/react-gantt/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248161267,"owners_count":21057554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gantt","gantt-chart","react","timeline"],"created_at":"2024-10-03T10:49:53.157Z","updated_at":"2026-03-16T15:04:36.711Z","avatar_url":"https://github.com/clayrisser.png","language":"JavaScript","funding_links":["https://liberapay.com/codejamninja/donate"],"categories":[],"sub_categories":[],"readme":"# react-gantt\n\n[![npm](https://img.shields.io/npm/v/react-gantt.svg?style=flat-square)](https://www.npmjs.com/package/react-gantt)\n[![npm](https://img.shields.io/npm/dt/react-gantt.svg?style=flat-square)](https://www.npmjs.com/package/react-gantt)\n[![GitHub stars](https://img.shields.io/github/stars/codejamninja/react-gantt.svg?style=social\u0026label=Stars)](https://github.com/codejamninja/react-gantt)\n\n\u003e Gantt chart react component\n\nPlease ★ this repo if you found it useful ★ ★ ★\n\n[Submit](https://github.com/codejamninja/react-gantt/issues/new) your ReactGantt use cases and\nI will feature them in the in the [used by](#used-by) section\n\n## Built by Silicon Hills LLC\n\n[![index](https://user-images.githubusercontent.com/6234038/71054254-f284ad80-2116-11ea-9013-d68306726854.jpeg)](https://nuevesolutions.com)\n\nSilicon Hills offers premium Node and React develpoment and support services. Get in touch at [nuevesolutions.com](https://nuevesolutions.com).\n\n![](assets/react-gantt.png)\n\n## Features\n\n* Multiple steps\n* Custom styles\n* Dynamic bounds\n\n## Demo\n\nSee a [demo](https://clayrisser.github.io/react-gantt)\n\n\n## Installation\n\n```sh\nnpm install --save react-gantt\n```\n\n\n## Dependencies\n\n* [NodeJS](https://nodejs.org)\n* [React](https://reactjs.org)\n* [React DOM](https://reactjs.org/docs/react-dom.html)\n\n\n## Usage\n\n```js\nimport ReactGantt, { GanttRow } from 'react-gantt';\n\nclass Demo extends Component {\n  render() {\n    return (\n      \u003cReactGantt\n        templates={{\n          myTasks: {\n            title: 'My Tasks',\n            steps: [\n              {\n                name: 'Task Phase One',\n                color: '#0099FF'\n              },\n              {\n                name: 'Task Phase Two',\n                color: '#FF9900'\n              }\n            ]\n          }\n        }}\n        leftBound={moment().set({hour: 0, date: 30, month: 5, year: 2016}).toDate()}\n        rightBound={moment().set({hour: 0, date: 29, month: 8, year: 2016}).toDate()}\n      \u003e\n        \u003cGanttRow\n          title=\"Task 1\"\n          templateName=\"myTasks\"\n          steps={[\n            moment().set({hour: 0, date: 1, month: 6, year: 2016}).toDate(),\n            moment().set({hour: 0, date: 4, month: 8, year: 2016}).toDate(),\n            moment().set({hour: 0, date: 17, month: 8, year: 2016}).toDate()\n          ]}\n        /\u003e\n        \u003cGanttRow\n          title=\"Task 1\"\n          templateName=\"myTasks\"\n          steps={[\n            moment().set({hour: 0, date: 27, month: 2, year: 2016}).toDate(),\n            moment().set({hour: 0, date: 9, month: 7, year: 2016}).toDate(),\n            moment().set({hour: 0, date: 22, month: 7, year: 2016}).toDate()\n          ]}\n        /\u003e\n      \u003c/ReactGantt\u003e\n    );\n  }\n}\n```\n\n## Props\n\n#### ReactGantt\n\n| Prop Name     | Type      |  Behavior          |\n|---------------|-----------|--------------------|\n| children      | GanttRow  | Gantt Rows initialized by you|\n| dateFormat    | String    | String format to display dates          |\n| dayFormat     | String    | Format used when timeline is in 'day' window          |\n| debug         | Boolean   | Includes extra detailed outputs to show calculated values          |\n| hourFormat    | String    | Format used when timeline is in 'hourly' window |\n| leftBound     | Object    | Date representation of the chart 'beginning' (left-most) date |\n| minuteFormat  | String    | Format used when timeline is in 'minute' window |\n| monthFormat   | String    | Format used when timeline is in 'monthly' window |\n| rightBound    | Object    | Date representation of chart's ending (right-most) date |\n| secondFormat  | String    | Format used when timeline is in 'seconds' window |\n| style         | Object    | CSS object for chart customization |\n| templates   | Object      | Object with keys representing potential states and values for state title and style |\n| timeFormat  | String      | Is this used? |\n| timelineStyle | Object    | Object for styles to be used in timeline component, namely the allowed width between ticks |\n| weekFormat  | String      | Format used when timeline is in 'weekly' window |\n| yearFormat  | String      | Format used when timeline is in 'yearly' window |\n\n#### GanttTimeline\n\n| Prop Name     | Type      |  Behavior          |\n|---------------|-----------|--------------------|\n| style         | Object    | Customize the calculated appearance of the timeline. In pixels: tickWidth, paddingLeft, minWidth |\n| rows          | Array     | The parent's GanttRows (is this deprecated?) |\n| scalingFactor | Number    | Allows customization of the calculated # of ticks |\n\n#### GanttRow\n\n| Prop Name     | Type      |  Behavior          |\n|---------------|-----------|--------------------|\n| barStyle      | Object    | Style object for gantt bar |\n| popupStyle    | Object    | Style object for popup modal |\n| markerStyle   | Object    | Style object for cursor |\n| steps         | Array     | Array of steps that bar passes through (needs to exceed the templates steps by 1? Why?)                   |\n| templateName  | String    | Template name to load style and step titles |\n| title         | String    | Title to be displayed alongside bar         |\n\n#### GanttBar\n| Prop Name     | Type      |  Behavior          |\n|---------------|-----------|--------------------|\n| style         | Object    | CSS object for bar styles |\n| steps         | Array     | Array of steps that bar passes through (needs to exceed the templates steps by 1? Why?)                   |\n| templateName  | String    | Template name to load style and step titles |\n\n#### GanttPopup\n| Prop Name     | Type      |  Behavior          |\n|---------------|-----------|--------------------|\n| style         | Object    | CSS Object for popup style |\n| markerTime    | Object    | Time object represnting cursor position on parent GanttBar |\n| activeStep    | Object    | Object representing current step cursor is hovering on parent GanttBar |\n| title         | String    | Title (same as parent Gantt bar) |\n| titleStyle    | Object    | Style for title displayed on pop up |\n## Support\n\nSubmit an [issue](https://github.com/codejamninja/react-gantt/issues/new)\n\n\n## Screenshots\n\n![react-gantt](https://user-images.githubusercontent.com/6234038/38774126-a5e7a830-4060-11e8-9e24-400248048105.jpg)\n\n\n## Contributing\n\nReview the [guidelines for contributing](https://github.com/codejamninja/react-gantt/blob/master/CONTRIBUTING.md)\n\n\n## License\n\n[MIT License](https://github.com/codejamninja/react-gantt/blob/master/LICENSE)\n\n[Jam Risser](https://codejam.ninja) © 2018\n\n\n## Changelog\n\nReview the [changelog](https://github.com/codejamninja/react-gantt/blob/master/CHANGELOG.md)\n\n\n## Credits\n\n* [Jam Risser](https://codejam.ninja) - Author\n\n\n## Used By\n\n* [ModernGreek](https://moderngreek.us) - The next generation of fraternity and sorority apparel\n* [yerbaBuena](https://github.com/JAER12392/yerbaBuena) - a superpowered approach to electronic medical records\n* [TaskCluster](https://github.com/taskcluster/taskcluster-migration-DEPRECATED) - task execution framework that supports Mozilla's continuous integration and release processes\n\n\n## Support on Liberapay\n\nA ridiculous amount of coffee ☕ ☕ ☕ was consumed in the process of building this project.\n\n[Add some fuel](https://liberapay.com/codejamninja/donate) if you'd like to keep me going!\n\n[![Liberapay receiving](https://img.shields.io/liberapay/receives/codejamninja.svg?style=flat-square)](https://liberapay.com/codejamninja/donate)\n[![Liberapay patrons](https://img.shields.io/liberapay/patrons/codejamninja.svg?style=flat-square)](https://liberapay.com/codejamninja/donate)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclayrisser%2Freact-gantt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclayrisser%2Freact-gantt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclayrisser%2Freact-gantt/lists"}