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-gantt

Dependencies

• NodeJS
• React
• React DOM

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

MIT 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!