< Announcing a new DHTMLX component - JavaScript To Do List Meet Gantt 7.0: Merging Work Calendars, Setting Work Time in Minutes, and Node.js Server Module

Fully-fledged Angular Gantt Chart
to Boost Your Project

Looking for a multifunctional and interactive Angular Gantt component
that can be easily integrated into your project management app? DHTMLX Gantt is at your service.

Live Demo

How to Create Angular Gantt Chart

5 steps to start with DHTMLX Gantt in Angular:
1
Create a gantt.component.ts file and import the file with Gantt config
2
Specify the path to the additional CSS file, which contains styles to correctly display Gantt chart on the page
3
Specify the CSS selector and inline template to create Gantt on the page
4
Use the ngOnInit method to initialize and render the Gantt component
5
Use the ngOnDestroy method to clean up when Gantt is no longer needed

Angular Gantt Examples

PRO Features of DHTMLX Angular Gantt

Auto scheduling

Applying this feature enables you to set up and support project schedule automatically depending on established dependencies between tasks instead of indicating dates of each task by hand.

View sample

auto scheduling
Balanced resource distribution

Balanced resource distribution

The enhanced functionality of the PRO edition allows you to create an Angular Gantt chart complemented with helpful resource management features. For instance, users can allocate resources to specific tasks and monitor the workload using advanced visualization instruments such as resource usage diagrams.

View sample

Critical path method

Complex projects comprising a huge number of interdependent tasks can hardly be managed properly without the use of critical path analysis. This approach is crucial when it comes to meeting project deadlines, as it allows determining a series of key tasks that directly affect the timeline of the project. These tasks are highlighted in red and failure to complete them on the due date will delay the end date of the entire project.

View sample

Critical path method
Showing custom content atop Gantt

Extra custom elements

Besides numerous custom items such as baselines and deadlines, you can display additional elements in an extra layer above the Timeline area. In the presented example of the Angular Gantt chart, you can see a custom S-curve that clearly shows how the project evolves.

10

Years on the market

6000+

NPM downloads per month

1000+

New trial & GNU GPL users per month

2500+

Customers

Why Choose DHTMLX Angular Gantt Chart?

Remarkably High Performance
Advanced performance
When working with a large number of tasks in a Gantt chart, rendering delays can be a big inconvenience. You will never have to worry about this problem when using our Angular Gantt component, as its advanced performance capability enables you to build sophisticated Gantt charts with thousands of tasks and easily navigate through them without any rendering lags.
Fully Customizable
All-encompassing customization
Being fully customizable our Angular Gantt chart library provides an extensive API that offers you a variety of options for changing its appearance. Developers can change Gantt layout with the help of numerous built-in skins, including a Material skin, and templates. Besides, it is possible to fine-tune the look of separate items (links, tasks, grid, scale, lightbox, etc.).
Intuitive User Interface
User-friendly interface
With our Angular Gantt control you can simplify the navigational experience for end-users by implementing the intuitive drag-and-drop interface. Users can easily manipulate the timing of tasks, reorder and interconnect tasks, and specify their priority by drag-n-drop. There are 3 built-in types of tasks: regular tasks, project tasks, and milestones. Users can make changes in tasks right through the grid without resorting to the lightbox. It is also possible to set Gantt in a read-only mode.
Accessibility
Accessibility support
Using DHTMLX Angular Gantt you can build interactive and feature-rich Gantt charts without any accessibility barriers. Our developers implemented a set of effective accessibility features such as WAI-ARIA support, keyboard navigation, and high-contrast themes. Thanks to these handy features, people with different types of disabilities won’t experience any inconvenience when working with our Gantt. Learn more about this important subject in our docs.
Resource Management
Resource management
The resource management feature enables you to determine the workload of each person involved in the project. After assigning resources (team members, equipment, financial assets, etc.) to project tasks, project managers can accurately assess the workload data using the resource diagram and make necessary adjustments.
Cross-browser Support
Cross-browser compatibility
Cross-browser support is essential for allowing users of your web application to interact with Gantt charts without facing any errors or rendering faults. That is why we’ve made our Angular Gantt component fully compatible with all popular web browsers (Google Chrome, Firefox, Internet Explorer (11+), Microsoft Edge, Safari).

DHTMLX Gantt Chart Using AngularJS and Other Technologies

Server-Side Computation for DHTMLX Angular Gantt

Node.js Gantt Chart Library

Complementary to the Angular Gantt component on the client-side, our team developed a Node.js server module for your web applications. It provides you with the following capabilities:

Real-time updates of the Gantt schedule caused by changes in project tasks made from different sources (e.g. web and mobile apps);
Ability to work with Gantt project schedule simultaneously for multiple end users;
Conducting computations and scheduling analysis on the server-side.

How to Export Your Angular Gantt Chart

Online Export
Online export
If you want to export your Gantt built using AngularJS or the latest Angular 9, you can do it via our online export service. You can easily export your charts to popular formats (PDF/PNG, MS Project, Excel, iCal).
Local export module
A local export module is exactly what you need for exporting your data safely in the required formats (PDF/PNG, MS Project, Primavera P6). There are 2 options for installing it on your computer: Docker image or standalone module.
Local module

Support & Learning Resources for Angular Gantt Chart

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

Why Angular Gantt Suits Well for Developers and Project Managers

gantt chart web development
Strengths for Developers
Our Gantt library can be easily integrated with AngularJS/Angular 9 as well as with other widely used client-side frameworks and server-side environments
Full-fledged API
Advanced customizing and editing functionality
Enhanced performance capability ensures trouble-free working experience with Gantt charts of any complexity level
Comprehensive documentation accompanied with vivid Angular Gantt demos
gantt chart web development
Strengths for Project Managers
Products under the DHTMLX brand have been a seal of quality on the software market for more than a decade
Any issues related to using DHTMLX products are solved in a timely manner by the team of professional developers who know all the ins and outs of our web-based tools
Our solutions have gained recognition among large software companies as well as businesses of different scales representing other industry sectors.
No hidden traps (external dependencies or additional fees)

What Customers Say

dhtmlxKanban
Looking for a Neat Task Board?
Try DHTMLX Kanban

Latest Customer Spotlights from Our Clients

DHTMLX Gantt for XB Software
Gantt for XB Software
MVP for ERP system using React
Read More
DHTMLX Gantt for Splitvice
Gantt in Splitvice
Portfolio and project management tool
Read More
DHTMLX Gantt in Hive
Gantt in Hive
Team productivity platform
Read More
DHTMLX Gantt for Keyworks
Gantt for Keyworks
Cloud public administration platform
Read More
DHTMLX Gantt for GanttPRO
Gantt for GanttPRO
Online project management tool
Read More

DHTMLX Angular Gantt Licensing

Free GNU GPL v2 Commercial Enterprise Ultimate
License Terms
Free GNU GPL v2
Commercial
Enterprise
Ultimate
Developers
Free GNU GPL v2
Commercial
5
Enterprise
20
Ultimate
Projects
Free GNU GPL v2
(open source only)
Commercial
1
Enterprise
5
Ultimate
SaaS
Free GNU GPL v2
Commercial
Enterprise
Ultimate
Perpetual distribution rights
Free GNU GPL v2
Commercial
Enterprise
Ultimate
Support Plan
Free GNU GPL v2
No Official Support
Commercial
Standard Support
Enterprise
Premium Support
Ultimate
Ultimate Support
Time Period
GNU GPL
Commercial
1 year
Enterprise
1 year
Ultimate
1 year
Updates
GNU GPL
Commercial
Minor & major updates
Bug fixes
Enterprise
Minor & major updates
Bug fixes
Ultimate
Minor & major updates
Bug fixes
Emergency bug fixes
Tickets
Free GNU GPL v2
Only Community Forum
Commercial
10
Enterprise
30
Ultimate
Response Time
GNU GPL
Commercial
72h
Enterprise
48h
Ultimate
24h
Personal Acccount Manager
GNU GPL
Commercial
Enterprise
Ultimate
Functionality
GNU GPL
Standard
Commercial
Professional
Enterprise
Professional
Ultimate
Professional
16 PRO features
GNU GPL
Commercial
Enterprise
Ultimate
Resource management
GNU GPL
Commercial
Enterprise
Ultimate
Critical path calculation
GNU GPL
Commercial
Enterprise
Ultimate
Baselines, deadlines and other custom elements
GNU GPL
Commercial
Enterprise
Ultimate
Simple API for hiding/showing columns of the grid
GNU GPL
Commercial
Enterprise
Ultimate
Dynamic loading
GNU GPL
Commercial
Enterprise
Ultimate
Tasks grouping
GNU GPL
Commercial
Enterprise
Ultimate
Auto scheduling
GNU GPL
Commercial
Enterprise
Ultimate
Project and milestones task types
GNU GPL
Commercial
Enterprise
Ultimate
Split tasks
GNU GPL
Commercial
Enterprise
Ultimate
Setting task types automatically
GNU GPL
Commercial
Enterprise
Ultimate
Custom content in the overlay
GNU GPL
Commercial
Enterprise
Ultimate
Time constraints for tasks
GNU GPL
Commercial
Enterprise
Ultimate
Project-level work calendars
GNU GPL
Commercial
Enterprise
Ultimate
MS Project-like format of task dependencies
GNU GPL
Commercial
Enterprise
Ultimate
Decimal format of task duration
GNU GPL
Commercial
Enterprise
Ultimate
Several Gantt charts on 1 page ? This feature enables creating and destroying instances of Gantt, what is especially common for Angular, React, and other frameworks.
GNU GPL
Commercial
Enterprise
Ultimate
Online export to PDF/PNG without watermark
GNU GPL
Commercial
1 year
Enterprise
1 year
Ultimate
Perpetual
Free local PDF/PNG export module
GNU GPL
Commercial
Enterprise
Ultimate
Free local module for MS Project export/import
GNU GPL
Commercial
Enterprise
Ultimate
GNU GPL
Commercial
Enterprise
Ultimate

Other DHTMLX Products

Need help with dhtmlxGantt integration into your app? Contact us

Send
a Question