NgxDailyGanttChart
ngx-daily-gantt-chart is a very simple Angular gantt-chart component with a day-view.
Features
- Dynamic workhours for each day.
- Expandable child tasks.
- Multiple color-coded task statuses per task.
- Modern design themes: Material and gradient.
- Tooltips with additional info for the bars and statuses on timeline.
Installation
Run npm install ngx-daily-gantt-chart --save
or download zip from github / clone repo.
Usage
Include the module in your component as:
import { NgxDailyGanttChartModule } from 'ngx-daily-gantt-chart';
Add the component in your HTML with the following inputs:
<gantt-chart [dayStart]="'09:00'" [dayEnd]="'15:30'" [tasks]="tasks" [theme]="'gradient'"></gantt-chart><!-- Theme is optional. Values are 'gradient', 'material', null. Default is 'material' -->
Your tasks array should look like the following:
tasks = [ { id: 1, label: 'task 1', description: 'description for task 1', start: '09:00', end: '14:30', statusList: [ { start: '09:30', color: '#18BFED' }, { start: '10:30', color: '#b3c71e' } ] }, { id: 2, label: 'task 2', description: 'description for task 2', start: '10:00', end: '11:00', isParent: true, // makes this row clickable & expandable statusList: [ { start: '09:30', color: '#18BFED' }, { start: '09:45', color: '#ff7300' }, { start: '10:30', color: '#b3c71e' } ] }, { id: 3, // Unique ID parentID: 2, // states this is a subtask isHidden: true, // hidden by default label: 'task 2a', // is shown inside the bars on timeline description: 'description for task 2a', tooltip: 'tooltip for task', // is shown when task is hovered start: '10:00', // start time of the task end: '14:25', // end time of the task statusList: [ { start: '11:30', // start time of first status color: '#18BFED' // background color of the status }, { start: '12:30', // start time of second status = end time of first status color: '#b3c71e', tooltip: 'tooltip for status', // is shown when status is hovered } ] } ];