# react-native-gantt-chart

> React Native Gantt Chart Library

Latest version **1.0.6** (published 2019-04-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-gantt-chart
pnpm add react-native-gantt-chart
yarn add react-native-gantt-chart
bun add react-native-gantt-chart
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2019-04-27 |
| First published | 2019-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 10.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | Çağatay Çiftçi |
| Maintainers | bluefx |
| Keywords | react, native, gantt, chart, svg |

## Links

- npm: https://www.npmjs.com/package/react-native-gantt-chart
- Repository: https://github.com/CiftciCagatay/react-native-gantt-chart
- Homepage: https://github.com/CiftciCagatay/react-native-gantt-chart#readme
- Issues: https://github.com/CiftciCagatay/react-native-gantt-chart/issues
- npm.io page: https://npm.io/package/react-native-gantt-chart

## Dependencies (4)

- [d3](https://npm.io/package/d3.md) ^5.9.2
- [moment](https://npm.io/package/moment.md) ^2.24.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-native-svg](https://npm.io/package/react-native-svg.md) ^9.4.0

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2019-04-27
- 1.0.5 — 2019-04-27
- 1.0.4 — 2019-04-26
- 1.0.3 — 2019-04-26
- 1.0.2 — 2019-04-26
- 1.0.1 — 2019-04-26
- 1.0.0 — 2019-04-26

## README

# 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

---
_Source: https://npm.io/package/react-native-gantt-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._