Angular Gantt Chart

Create project plans and other schedules in no time with the Angular Gantt Chart component. This interactive, data bound, and customizable component provides a task TreeList and a timeline pane. In the task list, users can edit, sort, and reorder records. In the timeline, users can resize, move, edit, and remove tasks. The timeline can also be displayed in day, week, and month views.

See the Angular Gantt Chart Overview demo

Bind the Angular Gantt component local or remote data and automatically populate tasks, dependencies, dates, and more.  The data can, but doesn’t need to, be hierarchical. Flat data will work perfectly.

See the Angular Gantt Chart Data Binding demo

Tasks and their related information are displayed in a TreeList pane. The Angular Gantt Chart gives you a virtual toolbox to make it exactly what you need. Options include the following:

• Auto-generate columns based on your data or configure your own.
• Hide columns programmatically or give the user the ability to do the same.
• Span content over multiple columns.
• Use templates to customize headers, cells, or contents.
• Set multi-column headers.
• Allow column resizing.
• Allow column reordering.
• Add a column menu with actions such as sort, filter, and visibility.

See the Angular Gantt Chart columns demo

The Angular Gantt Chart includes a list of tags to designate task types. These include a “summary” task, a task which has child tasks, a “regular” task, a task without child items, or a “milestone” task, which is a task without child items that has the same start and end date.

See the Angular Gantt Chart Tasks demo

To easily manage the relationships between different tasks, the Angular Gantt component provides four different dependency types: the “finish to finish” type, the “finish to start” type, the “start to start” type, and the “start to finish” type. Using these dependency types, you can ensure that tasks are properly defined.

See the Angular Gantt Chart Dependencies demo

With sorting enabled, the Angular Gantt Chart can reorganize all available tasks to be sorted by a specific data field, such as task start date or task type. Sorting can be enabled via a single configuration option and users can sort by clicking the header of a field. Clicking multiple times allows users to sort the items in an ascending order, descending order, or no sort order at all, giving them the option to remove any applied sorting. You can also programmatically set sorting and sort order, which means columns can be sorted upon initial render.

See the Angular Gantt Chart Sorting demo

The Angular Gantt component helps users reduce the number of items in their UI through filtering. Filtering can be done via a dedicated filter menu or by using fields such as text and dates as filters. Additionally, you can configure conditional filters, such as “starts with”, “contains” and more, on a column-by-column basis to give users maximum flexibility to manage their planning.

See the Angular Gantt Chart  Filtering demo

The Angular Gantt chart can display the task timeline by day, week, month, or year. Each view is further broken down by its child view. Days are broken into hours, weeks into days, months into weeks, and years into months. You can set this view programmatically or allow the user to decide.

See the Angular Gantt Chart Views demo

Choose to allow users to edit tasks listed in the TreeList in two ways. They can edit directly in cells or you can choose to implement the built-in dialog for a more full-featured experience.

Allow users to interact with and select single or multiple items in the task pane or items on the timeline.

Accessibility is important but can be tedious. We have got it covered. Our Angular Gantt chart is AAA rated with WCAG 2.0 and is compliant with Section 508 and WAI-ARIA standards.

The component is also available for a variety of popular Web frameworks:

• React Gantt Chart
• jQuery Gantt Chart
• Blazor Gantt Chart
• ASP.NET Core Gantt Chart
• ASP.NET MVC Gantt Chart
• ASP.NET AJAX Gantt Chart