Get Started

Install Automatically

This requires npm, yarn or bower
Download and install angular-gantt using one of the supported package manager.

Latest released version is the recommended and stable version.
```
yarn add angular-gantt --save
```
Master branch version contains bleeding edge features, but may be very unstable.
```
yarn add angular-gantt#master --save
```

Install using CDNs

You can find released version on CDNs.

//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.css

CDNjs (Replace <version> with latest github tag)

//cdnjs.cloudflare.com/ajax/libs/angular-gantt/<version>/angular-gantt.min.css

Add angular-gantt.min.js and angular-gantt.min.css URLs to your HTML code.

<head>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.css"/>
</head>
<body>
  <script src="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.js"></script>
</body>

Install Manually

Install dependencies in your application.
Download angular-gantt or use CDNs. Latest released version is available to download on Github and is the recommended and stable version.

Master branch version contains bleeding edge features, but may be very unstable.
Copy angular-gantt.js and angular-gantt.css located in dist directory to your application source folder.

Add angular-gantt.js and angular-gantt.css files to your HTML code.

<head>
  <link rel="stylesheet" href="dist/angular-gantt.css"/>
</head>
<body>
  <script src="../dist/angular-gantt.js"></script>
</body>

Usage

var myApp = angular.module('myApp', ['gantt']);

Put gantt directive into your HTML code at the position you would like to show the Gantt chart.
```
<div gantt data=data></div>
```

Define data variable in your scope to start using gantt through two-way binding.

$scope.data = [
    {name: 'row1', tasks: [
        {name: 'task1', from: <date>, to: <date>},
        {name: 'task2', from: <date>, to: <date>}
        ]
    },
    {name: 'row2', tasks: [
        {name: 'task3', from: <date>, to: <date>},
        {name: 'task4', from: <date>, to: <date>}
      ]
    },
  ...
]

[Optional] You can load plugins like table to display row names on left side, movable to make tasks movable and resizable with mouse and touch events, and tooltips to enable tooltips on mouse over.

var myApp = angular.module('myApp', ['gantt', 'gantt.table', 'gantt.movable', 'gantt.tooltips']);

<div gantt data=data>
  <gantt-table></gantt-table>
  <gantt-movable></gantt-movable>
  <gantt-tooltips></gantt-tooltips>
</div>

For a sample app see the files in demo or Plunker.