---
title: Overview
position: 1
seo_title: Overview of the Gantt Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  Gantt component and check out the extensive set of available options in its
  live demo.
---
## Gantt Overview

The Gantt component is a powerful tool that provides a comprehensive and organized view of project schedules. With its TreeList and Timeline sections, users can easily track project start and finish dates, task progress, dependencies, and milestones. Its rows and columns layout makes it simple for users to view and edit data, while its sorting and filtering features enable efficient management of project timelines and resources. Gantt charts are the ideal choice for project management as they ensure seamless coordination across tasks and teams.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/gantt/"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/gantt/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/gantt/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/gantt/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/gantt-wrapper/"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/gantt"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/gantt"}],"demo":"components/gantt/overview"}'></LiveDemo>

### Anatomy

The anatomy of the Gantt summarizes the elements of the component:

<BlueprintImage data='{"description":"","labels":[{"text":"Header toolbar"},{"text":"Gantt"},{"text":"Footer toolbar"},{"text":"Treelist pane"},{"text":"Splitbar"},{"text":"Timeline pane"},{"text":"Multicolumn grid header"},{"text":"Filter row"},{"text":"Summary task"},{"text":"Regular task"},{"text":"Milestone task"},{"text":"Sorted column"}]}'>![A Telerik and Kendo UI Gantt component](images/components-gantt-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI Gantt")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular Gantt","description":"Find more information about the Kendo UI for Angular Gantt in the official product documentation of the component.","url":"http://www.telerik.com/kendo-angular-ui/components/gantt/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor Gantt","description":"Find more information about the Telerik UI for Blazor Gantt in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/gantt/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery Gantt","description":"Find more information about the Kendo UI for jQuery Gantt in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/gantt/overview"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact Gantt","description":"Find more information about the KendoReact Gantt in the official product documentation of the component.","url":"http://www.telerik.com/kendo-react-ui/components/gantt/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue Gantt","description":"Find more information about the Kendo UI for Vue Gantt in the official product documentation of the component.","url":"http://www.telerik.com/kendo-vue-ui/components/gantt/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core Gantt","description":"Find more information about the Telerik UI for ASP.NET Core Gantt component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/scheduling/gantt/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC Gantt","description":"Find more information about the Telerik UI for ASP.NET MVC Gantt component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/scheduling/gantt/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>