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