https://github.com/clayrisser/react-gantt
A gantt chart for react
https://github.com/clayrisser/react-gantt
gantt gantt-chart react timeline
Last synced: 4 months ago
JSON representation
A gantt chart for react
- Host: GitHub
- URL: https://github.com/clayrisser/react-gantt
- Owner: clayrisser
- License: mit
- Created: 2016-07-25T21:44:21.000Z (almost 10 years ago)
- Default Branch: main
- Last Pushed: 2024-05-27T19:22:28.000Z (about 2 years ago)
- Last Synced: 2025-04-07T06:48:50.693Z (about 1 year ago)
- Topics: gantt, gantt-chart, react, timeline
- Language: JavaScript
- Homepage: https://codejam.ninja
- Size: 3.04 MB
- Stars: 149
- Watchers: 7
- Forks: 40
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-gantt
[](https://www.npmjs.com/package/react-gantt)
[](https://www.npmjs.com/package/react-gantt)
[](https://github.com/codejamninja/react-gantt)
> Gantt chart react component
Please ★ this repo if you found it useful ★ ★ ★
[Submit](https://github.com/codejamninja/react-gantt/issues/new) your ReactGantt use cases and
I will feature them in the in the [used by](#used-by) section
## Built by Silicon Hills LLC
[](https://nuevesolutions.com)
Silicon Hills offers premium Node and React develpoment and support services. Get in touch at [nuevesolutions.com](https://nuevesolutions.com).
## Features
* Multiple steps
* Custom styles
* Dynamic bounds
## Demo
See a [demo](https://clayrisser.github.io/react-gantt)
## Installation
```sh
npm install --save react-gantt
```
## Dependencies
* [NodeJS](https://nodejs.org)
* [React](https://reactjs.org)
* [React DOM](https://reactjs.org/docs/react-dom.html)
## Usage
```js
import ReactGantt, { GanttRow } from 'react-gantt';
class Demo extends Component {
render() {
return (
);
}
}
```
## Props
#### ReactGantt
| Prop Name | Type | Behavior |
|---------------|-----------|--------------------|
| children | GanttRow | Gantt Rows initialized by you|
| dateFormat | String | String format to display dates |
| dayFormat | String | Format used when timeline is in 'day' window |
| debug | Boolean | Includes extra detailed outputs to show calculated values |
| hourFormat | String | Format used when timeline is in 'hourly' window |
| leftBound | Object | Date representation of the chart 'beginning' (left-most) date |
| minuteFormat | String | Format used when timeline is in 'minute' window |
| monthFormat | String | Format used when timeline is in 'monthly' window |
| rightBound | Object | Date representation of chart's ending (right-most) date |
| secondFormat | String | Format used when timeline is in 'seconds' window |
| style | Object | CSS object for chart customization |
| templates | Object | Object with keys representing potential states and values for state title and style |
| timeFormat | String | Is this used? |
| timelineStyle | Object | Object for styles to be used in timeline component, namely the allowed width between ticks |
| weekFormat | String | Format used when timeline is in 'weekly' window |
| yearFormat | String | Format used when timeline is in 'yearly' window |
#### GanttTimeline
| Prop Name | Type | Behavior |
|---------------|-----------|--------------------|
| style | Object | Customize the calculated appearance of the timeline. In pixels: tickWidth, paddingLeft, minWidth |
| rows | Array | The parent's GanttRows (is this deprecated?) |
| scalingFactor | Number | Allows customization of the calculated # of ticks |
#### GanttRow
| Prop Name | Type | Behavior |
|---------------|-----------|--------------------|
| barStyle | Object | Style object for gantt bar |
| popupStyle | Object | Style object for popup modal |
| markerStyle | Object | Style object for cursor |
| steps | Array | Array of steps that bar passes through (needs to exceed the templates steps by 1? Why?) |
| templateName | String | Template name to load style and step titles |
| title | String | Title to be displayed alongside bar |
#### GanttBar
| Prop Name | Type | Behavior |
|---------------|-----------|--------------------|
| style | Object | CSS object for bar styles |
| steps | Array | Array of steps that bar passes through (needs to exceed the templates steps by 1? Why?) |
| templateName | String | Template name to load style and step titles |
#### GanttPopup
| Prop Name | Type | Behavior |
|---------------|-----------|--------------------|
| style | Object | CSS Object for popup style |
| markerTime | Object | Time object represnting cursor position on parent GanttBar |
| activeStep | Object | Object representing current step cursor is hovering on parent GanttBar |
| title | String | Title (same as parent Gantt bar) |
| titleStyle | Object | Style for title displayed on pop up |
## Support
Submit an [issue](https://github.com/codejamninja/react-gantt/issues/new)
## Screenshots
## Contributing
Review the [guidelines for contributing](https://github.com/codejamninja/react-gantt/blob/master/CONTRIBUTING.md)
## License
[MIT License](https://github.com/codejamninja/react-gantt/blob/master/LICENSE)
[Jam Risser](https://codejam.ninja) © 2018
## Changelog
Review the [changelog](https://github.com/codejamninja/react-gantt/blob/master/CHANGELOG.md)
## Credits
* [Jam Risser](https://codejam.ninja) - Author
## Used By
* [ModernGreek](https://moderngreek.us) - The next generation of fraternity and sorority apparel
* [yerbaBuena](https://github.com/JAER12392/yerbaBuena) - a superpowered approach to electronic medical records
* [TaskCluster](https://github.com/taskcluster/taskcluster-migration-DEPRECATED) - task execution framework that supports Mozilla's continuous integration and release processes
## Support on Liberapay
A ridiculous amount of coffee ☕ ☕ ☕ was consumed in the process of building this project.
[Add some fuel](https://liberapay.com/codejamninja/donate) if you'd like to keep me going!
[](https://liberapay.com/codejamninja/donate)
[](https://liberapay.com/codejamninja/donate)