Skip to content

clayrisser/react-gantt

Repository files navigation

react-gantt

npm npm GitHub stars

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

index

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

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

react-gantt

Contributing

Review the guidelines for contributing

License

MIT License

Jam Risser © 2018

Changelog

Review the changelog

Credits

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!

Liberapay receiving Liberapay patrons