ngx-gantt

Language: English | 中文

A modern Gantt chart component for Angular, published as @worktile/gantt.

Documentation

Documentation (GitHub Pages) — guides, API, and examples.

Installation

npm install @worktile/gantt
# or
yarn add @worktile/gantt

Optional: install html2canvas if you use export or print (GanttPrintService).

npm install html2canvas

Quick start

Requirements

• Angular ≥ 21
• Peer dependencies: @angular/cdk, date-fns, @date-fns/tz, rxjs

See Getting Started for exact versions and install commands.

Styles

Pick one:

1. angular.json — add node_modules/@worktile/gantt/styles/index.scss to the styles array.
2. Global SCSS

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

Component

Use standalone imports (recommended), or import NgxGanttModule in your NgModule.

import { Component } from '@angular/core';
import { NgxGanttComponent, NgxGanttTableComponent, NgxGanttTableColumnComponent, GanttItem, GanttViewType } from '@worktile/gantt';

@Component({
  selector: 'app-gantt-example',
  standalone: true,
  imports: [NgxGanttComponent, NgxGanttTableComponent, NgxGanttTableColumnComponent],
  template: `
    <ngx-gantt [items]="items" [viewType]="viewType">
      <ngx-gantt-table>
        <ngx-gantt-column name="Title" width="200px">
          <ng-template #cell let-item="item">{{ item.title }}</ng-template>
        </ngx-gantt-column>
      </ngx-gantt-table>
    </ngx-gantt>
  `
})
export class AppGanttExampleComponent {
  viewType = GanttViewType.day;

  items: GanttItem[] = [
    { id: '1', title: 'Task 0', start: 1627729997, end: 1628421197 },
    { id: '2', title: 'Task 1', start: 1617361997, end: 1625483597 }
  ];
}

Development

git clone git@github.com:worktile/ngx-gantt.git
cd ngx-gantt
npm ci
npm run start

Contributors ✨

Thanks to these wonderful people (emoji key):

Walker 💬 💻 🎨 📖 🚇 🚧 📆 👀

zhangwen 💻

cmq 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT