react-gantt
Gantt chart react component
Please ★ this repo if you found it useful ★ ★ ★
Submit your ReactGantt use cases and I will feature them in the in the used by section
Features
- Multiple steps
- Custom styles
- Dynamic bounds
Demo
See a demo
Installation
npm install --save react-ganttDependencies
Usage
import ReactGantt, { GanttRow } from 'react-gantt'; class Demo extends Component { render() { return ( <ReactGantt templates={{ myTasks: { title: 'My Tasks', steps: [ { name: 'Task Phase One', color: '#0099FF' }, { name: 'Task Phase Two', color: '#FF9900' } ] } }} leftBound={moment().set({hour: 0, date: 30, month: 5, year: 2016}).toDate()} rightBound={moment().set({hour: 0, date: 29, month: 8, year: 2016}).toDate()} > <GanttRow title="Task 1" templateName="myTasks" steps={[ moment().set({hour: 0, date: 1, month: 6, year: 2016}).toDate(), moment().set({hour: 0, date: 4, month: 8, year: 2016}).toDate(), moment().set({hour: 0, date: 17, month: 8, year: 2016}).toDate() ]} /> <GanttRow title="Task 1" templateName="myTasks" steps={[ moment().set({hour: 0, date: 27, month: 2, year: 2016}).toDate(), moment().set({hour: 0, date: 9, month: 7, year: 2016}).toDate(), moment().set({hour: 0, date: 22, month: 7, year: 2016}).toDate() ]} /> </ReactGantt> ); } }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
Screenshots
Contributing
Review the guidelines for contributing
License
Jam Risser © 2018
Changelog
Review the changelog
Credits
- Jam Risser - Author
Used By
- ModernGreek - The next generation of fraternity and sorority apparel
- yerbaBuena - a superpowered approach to electronic medical records
- TaskCluster - 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 if you'd like to keep me going!
