Angular

The fastest Angular Gantt chart

The Bryntum Angular Gantt chart is a super-fast and fully customizable Gantt component for your Angular application.

Clear and concise documentation

Gantt chart for Angular code example

The following code example shows the setup for an Angular Gantt chart project with task dependencies in app.component.ts.

import { Component, ViewChild } from '@angular/core';
import { BryntumGanttComponent, BryntumGanttProjectModelComponent } from '@bryntum/gantt-angular';
import { ganttConfig, projectConfig } from './app.config';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

export class AppComponent {
    startDate = new Date(2022, 0, 1);
    tasks = [
        {
            id: 1,
            name: 'Write docs',
            expanded: true,
            children: [
                { id : 6, name : 'Proof-read docs', startDate : '2022-01-02', endDate : '2022-01-09' },
                { id : 3, name : 'Release docs', startDate : '2022-01-09', endDate : '2022-01-10' }
            ]
        }
    ];

    dependencies = [
        { fromTask : 6, toTask : 3 }
    ];

    ganttConfig = ganttConfig;
    projectConfig = projectConfig;

    @ViewChild('gantt') ganttComponent!: BryntumGanttComponent;
    @ViewChild('project') projectComponent!: BryntumGanttProjectModelComponent;
}

Task constraints of the Angular Gantt chart

Easily add task constraints in your Bryntum Angular Gantt chart for granular control over how tasks are scheduled:

Start no earlier than
Start no later than
Finish no earlier than
Finish no later than
Must start on
Must finish on

Dynamic rendering with Angular template syntax

Render custom elements using Angular components in the Bryntum Angular Gantt chart. Easily use Angular HTML-based template syntax in components and keep rendering logic and markup in sync.

View docs


columns: [
  {
    text: 'Angular Component',
    field: 'color',
    htmlEncode: false, 
    renderer(data: any) {
      const { record, value } = data;
      // Use Custom Element with attributes
      return `<color-renderer value="${value.toLowerCase()}" name="${record.name}"></color-renderer>`;
    }
  }
]

Customizable Task Editor for for the Angular Gantt chart component

The Bryntum Angular Gantt has a built-in Task Editor you can easily extend and customize. Change the visible fields and add your own custom tabs.

View example

Best-in-class Angular Gantt scheduling engine

The Bryntum Angular Gantt engine provides asynchronous scheduling of any number of tasks by taking task dependencies, constraints, and scheduling modes into account. The Bryntum Angular Gantt engine is implemented independently from the DOM and can also be run on a node server.

Animated redraws

When you move a task, the result is animated into place so you can easily follow how an update affects other tasks.

Bryntum Angular Gantt chart features

The Bryntum Angular Gantt chart includes features like the task editor, configurable tooltips, and resource assignment editor.

The Bryntum documentation describes all the technical details of the Bryntum Angular Gantt chart.

View all features

Render custom HTML

Render custom HTML in the Bryntum Angular Gantt taskbar element for an enhanced, elegant interface. Include a customization menu to toggle UI settings during runtime and personalize the user experience.

View example