react-native-gantt-chart

Welcome to react-native-gantt-chart. We needed gantt chart for our project and couldn't find any modules. So we decided to built one! These are our initial commits, wait for rapid updates!

Feedbacks and PRs are always welcome :)

Prerequisites

This library uses react-native-svg for rendering. Please make sure you installed and linked react-native-svg module.

Installation

npm install --save react-native-gantt-chart

Example

import React, { Component } from 'react'
import { View } from 'react-native'
import GanttChart from 'react-native-gantt-chart'

class Test extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      tasks: [
        { _id: "1", name: "Task 1", "start": new Date(2018, 0, 1), "end": new Date(2018, 0, 5), progress: 0.25 },
        { _id: "2", name: "Task 2", "start": new Date(2018, 0, 3), "end": new Date(2018, 0, 4), progress: 1 },
        { _id: "3", name: "Task 3", "start": new Date(2018, 0, 5), "end": new Date(2018, 0, 8), progress: 0.5 }
        ]
    }
  }
  
  render() {
    return (
        <GanttChart 
          data={this.state.tasks}
          numberOfTicks={6}
          onPressTask={task => alert(task.name)}
          gridMin={new Date(2018, 0, 1).getTime()}
          gridMax={new Date(2018, 0, 20).getTime()}
          colors={{
            barColorPrimary: '#0c2461',
            barColorSecondary: '#4a69bd',
            textColor: '#fff',
            backgroundColor: '#82ccdd'
          }}
          />
    )
  }
}

export default Test

Props

|Prop|Default|Description| |---|-----|-----| |data|required (Data Props see below)|Array of data to present| |numberOfTicks|4|How many ticks time grid should try to render| |onPressTask|() => {}|Callback function onPress task bar on chart| |colors|Color Props (see below)|Color options for chart| |gridMin|undefined|Min date for chart to start| |gridMax|undefined|Max date for chart to end|

Data Props

|Prop|Type|Required|Description| |---|---|-|-----| |_id|String|x|Unique key for each data item| |name|String||Name to show on task bar| |progress|Float (0 to 1)||Completed part of task as percentage| |start|Date|x|Start date of task| |end|Date|x|End date of task|

Color Props

|Prop|Default|Description| |---|---|-----| |barColorPrimary|#0c2461|Color for completed part of task| |barColorSecondary|#4a69bd|Color for uncomplete part of task| |textColor|#fff|TimeGrid color and Bar text color| |backgroundColor|#82ccdd|Background color for chart|

License

MIT