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
Silicon Hills offers premium Node and React develpoment and support services. Get in touch at nuevesolutions.com.
See a demo
npm install --save react-gantt
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>
);
}
}
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 |
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 |
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 |
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 |
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 |
Submit an issue
Review the guidelines for contributing
Jam Risser © 2018
Review the changelog
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!