Kendo UI for Angular

Angular Gantt Chart

  • Create project plans and other schedules in no time with the Angular Gantt Chart component. Bind local or remote data, easily customize everything on the task list and timeline, and more.
  • Part of the Kendo UI for Angular library along with 100+ professionally-designed components developers trust for all their Angular UI needs.
  • Get up and running quickly with award winning support, detailed documentation, demos, virtual classrooms and a 3-million-strong developer community.
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    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

  • Data Binding

    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

  • Task TreeList Column Options

    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

  • Tasks

    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

    Angular Gantt Component Tasks
  • Dependencies

    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

    Angular Gantt Component Dependencies
  • Sorting

    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

    Sorting - Angular Gantt Component
  • Filtering

    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

    Filtering - Angular Gantt Component
  • Day, Week, Month, and Year Views

    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

  • Edit Directly In-cell or Via Dialog

    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.

    See the Angular Gantt Editing demo
  • Selection

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

    See the Angular Gantt Selection Demo
  • Accessibility

    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.

    Telerik ASP.NET Core ColorPalette Component Accessibility
Kendo Angular UI Getting Started Background

Get Started with Kendo UI for Angular

Kendo UI