3

Highcharts Gantt is currently in Alpha but we can use it with this link

I'd like to use this library in a angular project but I have not found any documation to help me in this direction. Is it possible? If so, what is the procedure?

In the case that it would not be possible yet, is there any other angular library for Gantt Chart?

Marcel Jr. Samson Morasse
  • 547
  • 2
  • 8
  • 25
  • 2
    Easiest solution would be to just include that javascript file as an asset, and then require('filelocation')(HighCharts) similar to other library inclusions. – Z. Bagley Nov 10 '17 at 17:19
  • Would it be possible to import it as a module instead? – Marcel Jr. Samson Morasse Nov 10 '17 at 18:06
  • 1
    If you by module you mean Highcharts module, then no. Highcharts Gantt is not a module for Highcharts - it's a separate product. It's not yet published, so it doesn't have an official NPM package. You could load the JS code as *Z. Bagley* suggested. – Kacper Madej Nov 14 '17 at 14:13
  • any update about the use of GanttChart ?? – asmatrk Feb 10 '20 at 12:32

1 Answers1

3

This Procedure is specifically for Angular and highcharts gantt

  1. Install Highcharts from NPM using "npm install --save highchats" command for latest version
  2. Create component for chart

in component.ts file

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, AfterViewChecked } from '@angular/core';
import * as Highcharts from 'highcharts/highcharts-gantt';
@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.scss']
})
export class ChartComponent implements OnInit,AfterViewInit {
  @ViewChild('divRef', { static: false }) divReference: ElementRef;
  constructor() { }
  ngAfterViewInit() {
    this.highchartclick();
 }
ngOnInit(): void {

}
  highchartclick() {
    Highcharts.ganttChart(this.divReference.nativeElement as HTMLElement, {
      title: {
        text: 'Simple Gantt Chart'
      },
      chart: { renderTo: this.divReference.nativeElement as HTMLElement },
      series: [
        {
          name: 'Project 1',
          type: 'gantt',
          data: [
            {
              id: 's',
              name: 'Start prototype',
              start: Date.UTC(2014, 10, 20),
              end: Date.UTC(2014, 10, 20)
            }, {
              id: 'b',
              name: 'Develop',
              start: Date.UTC(2014, 10, 20),
              end: Date.UTC(2014, 10, 25),
              dependency: 's'
            }, {
              id: 'a',
              name: 'Run acceptance tests',
              start: Date.UTC(2014, 10, 23),
              end: Date.UTC(2014, 10, 26)
            },
            {
              name: 'Test prototype',
              start: Date.UTC(2014, 10, 24),
              end: Date.UTC(2014, 10, 29),
              dependency: ['a', 'b']
            }
          ]
        }]
    });
  }
}

in component .html file


<div id="container" #divRef  ></div>

Hope this will help others it is working fine in angular 10 and highchart version 8.1.2

Suganthy
  • 46
  • 2