Collapse All
Expand All
Undo
Redo
Auto Scheduling
Critical Path
Fullscreen
Zoom to Fit
Zoom Out
Zoom In
Export
PDF
Get more tools at the best price for building full-featured apps faster.
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.
Gantt for:
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
Complete tutorial coming soon.
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.
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.
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.
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?
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.
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.).
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 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
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 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 integrations
Server-Side Computation for DHTMLX Angular Gantt
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
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.
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
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
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
Best choice for product development. Absolutely
It's stable. It's easy to setup, even if you don't have to much development experience. It's highly customizable. It's full of features out of the box (and if something missing, you can write your own addon to cover missing functionality). It's beautiful out of the box, which is not always the case for similar components. Workload functionality is included, which is not the case for such components.
Truly Exceptional Products!
We searched high and low for a suite of components to make our lives much easier in developing our products, We initially had a need for a Gantt Chart and this one really stood out from the rest. I can tell you that after implementing it on 2 large products we are very impressed with the quality of this component as well as their other products.
Outstanding component
After reviewing many options for a Gantt component, we selected the one from DHTMLX. It is beautifully designed (appearance/UI) which was a key consideration for us, but really it's the full scope of features and capabilities that make it stand out. It has the flexibility for us to make it work exactly the way we need, and it has been a very simple process to integrate it and get it up and running.
Latest Customer Spotlights from Our Clients
DHTMLX Angular Gantt Licensing
| Individual | Commercial | Enterprise | Ultimate | |
|---|---|---|---|---|
| License Terms |
Individual
|
Commercial
|
Enterprise
|
Ultimate
|
| Developers |
Individual
1
|
Commercial
5
|
Enterprise
20
|
Ultimate
|
| Projects |
Individual
1
|
Commercial
1
|
Enterprise
5
|
Ultimate
|
| Use in SaaS (unlimited end-users) |
Individual
|
Commercial
|
Enterprise
|
Ultimate
|
| Use in Salesforce |
Individual
|
Commercial
|
Enterprise
|
Ultimate
|
| Perpetual distribution rights |
Individual
|
Commercial
|
Enterprise
|
Ultimate
|
| Support Plan |
Individual
Standard Support
|
Commercial
Premium Support
|
Enterprise
Premium Support
|
Ultimate
Ultimate Support
|
| Time Period |
Individual
1 year
|
Commercial
1 year
|
Enterprise
1 year
|
Ultimate
1 year
|
| Updates |
Individual
Minor & major updates
Bug fixes
|
Commercial
Minor & major updates
Bug fixes
|
Enterprise
Minor & major updates
Bug fixes
|
Ultimate
Minor & major updates
Bug fixes
Emergency bug fixes
|
| Support requests |
Individual
10
|
Commercial
30
|
Enterprise
50
|
Ultimate
|
| Response Time |
Individual
72h
|
Commercial
48h
|
Enterprise
48h
|
Ultimate
24h
|
| Personal account Manager |
Individual
|
Commercial
|
Enterprise
|
Ultimate
|
|
Functionality
|
Individual
Professional
|
Commercial
Professional
|
Enterprise
Professional
|
Ultimate
Professional
|
| 16 PRO features |
Individual
|
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. |
Individual
|
Commercial
|
Enterprise
|
Ultimate
|
| Online export to PDF/PNG without watermark |
Individual
Free for 1 year
|
Commercial
Free for 1 year
|
Enterprise
Free for 1 year
|
Ultimate
Free for 3 years
|
| Free local PDF/PNG export module |
Individual
|
Commercial
|
Enterprise
|
Ultimate
|
| Free local module for MS Project export/import |
Individual
|
Commercial
|
Enterprise
|
Ultimate
|
| Free Node.js Gantt server module |
Individual
|
Commercial
|
Enterprise
|
Ultimate
|
|
Individual
Total: $699
|
Commercial
Total: $1399
|
Enterprise
Total: $2999
|
Ultimate
Total: $5999
|
Bundle Offers
If you have an open-source (GNU GPL v2) project and you are not interested in PRO features, you may
use DHTMLX Gantt Standard Edition for free.
It comes without official technical support, but you can use the community forum instead.
It comes without official technical support, but you can use the community forum instead.
Need help with dhtmlxGantt integration into your app? Contact us
Send
a Question
a Question