Documentation

This library is used to generate gantt chart in angular application

Installation

First we need to add gantt chart javascript file from google cdn and add in application index.html file
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

npm install gantt-chart-angular

import GanttChartAngularModule in app.module

import { GanttChartAngularModule } from 'gantt-chart-angular';
imports: [
    GanttChartAngularModule
  ]

gantt-chart-angular library usage in our application

<gantt-chart-angular [config]="config" (onClick)="clickEventHandler($event)"></gantt-chart-angular>

config format in which we will pass columns and data as array

config = {
    columns: [
      {type: 'string', name: 'ID', field: 'id'},
      {type: 'string', name: 'Name', field: 'name'},
      {type: 'date', name: 'Start Date', field: 'startDate'},
      {type: 'date', name: 'End Date', field: 'endDate'},
      {type: 'number', name: 'Duration', field: 'duration'},
      {type: 'number', name: 'Percentage Complete', field: 'percentComplete'},
      {type: 'string', name: 'Pending Reasons', field: 'pendingReasons'}
    ], data: [
      {
        id: 'setup',
        name: 'Angular',
        startDate: new Date(2021, 2, 10),
        endDate: new Date(2021, 2, 11),
        duration: 2,
        percentComplete:  100,
        pendingReasons: null
      }, {
        id: 'Start Development',
        name: 'Login Feature',
        startDate: new Date(2021, 2, 13),
        endDate: new Date(2021, 2, 14),
        duration: 2,
        percentComplete:  0,
        pendingReasons: null
      },{
        id: 'Test',
        name: 'Test Login Feature',
        startDate: new Date(2021, 2, 16),
        endDate: new Date(2021, 2, 17),
        duration: 2,
        percentComplete:  0,
        pendingReasons: null
      }, {
        id: 'Deploy',
        name: 'Deploy to server',
        startDate: new Date(2021, 2, 18),
        endDate: new Date(2021, 2, 18),
        duration: 1,
        percentComplete:  0,
        pendingReasons: null
      }
    ],
    options: {
      height: 275,
      gantt: {
        criticalPathEnabled: false,
        innerGridHorizLine: {
          stroke: '#ffe0b2',
          strokeWidth: 2
        },
        innerGridTrack: {fill: '#fff3e0'},
        innerGridDarkTrack: {fill: '#ffcc80'}
      }
    }
  };

Inputs

| Input | Type | Required/Optional | Uses | | ------ | ------ | ------ | ------ | | config | object | required | configuration including chart columns, data and options like chart style |

Events

| Output | Uses | | ------ | ------ | | onClick | Emitter will trigger when user click on any particular row and return information of clicked row|