https://github.com/worktile/ngx-gantt

A modern and powerful gantt chart component for Angular
https://github.com/worktile/ngx-gantt

angular gantt gantt-chart gantt-chart-component ganttchart ngx-gantt

Last synced: 1 day ago
JSON representation

A modern and powerful gantt chart component for Angular

• Host: GitHub
• URL: https://github.com/worktile/ngx-gantt
• Owner: worktile
• License: mit
• Created: 2020-05-22T09:19:29.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2025-01-10T08:16:22.000Z (9 days ago)
• Last Synced: 2025-01-11T08:06:14.322Z (8 days ago)
• Topics: angular, gantt, gantt-chart, gantt-chart-component, ganttchart, ngx-gantt
• Language: TypeScript
• Homepage: http://gantt.ngnice.com
• Size: 9.53 MB
• Stars: 263
• Watchers: 12
• Forks: 78
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ngx-gantt - A modern and powerful gantt chart component for Angular. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-gantt - A modern and powerful gantt chart component for Angular. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-gantt - A modern and powerful gantt chart component for Angular. (Table of contents / Third Party Components)

README

        
# ngx-gantt

[![CircleCI](https://circleci.com/gh/worktile/ngx-gantt.svg?style=shield)](https://circleci.com/gh/worktile/ngx-gantt)

[![Coverage Status][coveralls-image]][coveralls-url]

[![npm (scoped)](https://img.shields.io/npm/v/@worktile/gantt?style=flat)](https://www.npmjs.com/package/@worktile/gantt)

[![npm](https://img.shields.io/npm/dm/@worktile/gantt)](https://www.npmjs.com/package/@worktile/gantt)

![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@worktile/gantt)

[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)

[coveralls-image]: https://coveralls.io/repos/github/worktile/ngx-gantt/badge.svg?branch=master

[coveralls-url]: https://coveralls.io/github/worktile/ngx-gantt

A modern and powerful gantt component for Angular

## Installation

```bash

$ npm i @worktile/gantt html2canvas --save

# or

$ yarn add @worktile/gantt html2canvas

```

## Demo

[Try out our live demo](http://gantt.ngnice.com/)

## Usage

### 1. Import the NgxGanttModule to use into your app.module.ts

```ts

import { NgModule } from '@angular/core';

import { NgxGanttModule } from '@worktile/gantt';

@NgModule({

  ...

  imports: [ NgxGanttModule, ... ]

  ...

})

export class AppModule {

}

```

### 2. Import style file in angular.json or import style in your style.scss

```json

{

  "styles": ["node_modules/@worktile/gantt/styles/index.scss"]

}

```

```scss

@use '@worktile/gantt/styles/index.scss';

```

### 3. Using component

component.html

```html

  

    

       {{ item.title }} 

    

  

```

component.ts

```javascript

@Component({

  selector: 'app-gantt-example',

  templateUrl: './gantt.component.html'

})

export class AppGanttExampleComponent {

  items: GanttItem[] = [

    { id: '000000', title: 'Task 0', start: 1627729997, end: 1628421197 },

    { id: '000001', title: 'Task 1', start: 1617361997, end: 1625483597 }

  ];

  constructor() {}

}

```

See [Getting Started](http://gantt.ngnice.com/guides/getting-started) for more details.

## Development

```bash

$ git clone [email protected]:worktile/ngx-gantt.git

$ cd ngx-gantt

$ npm ci

$ npm run start

```

## Roadmap

- [ ] virtual scrolling

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
Walker
💬 💻 🎨 📖 🚇 🚧 📆 👀

    
zhangwen
💻

    
cmq
💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

## LICENSE

[MIT License](https://github.com/worktile/ngx-gantt/blob/master/LICENSE)