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
Built by Silicon Hills LLC
Silicon Hills offers premium Node and React develpoment and support services. Get in touch at nuevesolutions.com.
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!
