---
title: Overview
position: 1
seo_title: Overview of the OrgChart Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  OrgChart component, the elements of its anatomy, its states, and variants.
  Check out the extensive set of available options in its live demo.
---
## OrgChart Overview

The OrgChart component is a visual representation tool used to display hierarchical structures and organizational relationships within an application. It provides a tree-like structure, where users can edit individual nodes, change their parent, or group them in the tree. This control helps you visualize hierarchical data in a sophisticated way and allows multiple nodes to expand and collapse, providing a comprehensive overview of the organizational structure units, such as employees, teams, or departments.

### Live Demo

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

### Appearance

The OrgChart component provides built-in styling options that grant visually appealing and flexible rendering experience.

#### Anatomy

The anatomy of the OrgChart summarizes the visual and functional elements of the component. The main elements include parent and child nodes, expand-collapse button, and OrgChart cards.

The next image shows the anatomy of the OrgChart and includes the following elements:

<BlueprintImage data='{"description":"","labels":[{"text":"OrgChart parent node"},{"text":"Expand/collapse icon button"},{"text":"OrgChart line"},{"text":"OrgChart child node"},{"text":"OrgChart card"},{"text":"Avatar"},{"text":"Color indicator"},{"text":"“More Options” icon button"}]}'>![A Telerik and Kendo OrgChart component and its elements](images/components-orgchart-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI OrgChart component")</BlueprintImage>

#### Variants

Depending on the elements they display, the Telerik and Kendo UI OrgChart components can be any of the following types:

* OrgChart
* OrgChart with a group field

<BlueprintImage data='{"description":"","labels":[{"text":"OrgChart"},{"text":"OrgChart with group field"}]}'>![Two variants of the Telerik and Kendo OrgChart component including a simple OrgChart and an OrgChart with a group field](images/components-orgchart-overview-variants-v2.png "The two available variants of the Telerik and Kendo OrgChart component")</BlueprintImage>

#### Layout

Depending on the layout, the Telerik and Kendo UI OrgChart components can be any of the following types:

* Horizontal
* Vertical

<BlueprintImage data='{"description":"","labels":[{"text":"Horizontal"},{"text":"Vertical"}]}'>![Two variants of the Telerik and Kendo OrgChart component including vertical and horizontal](images/components-orgchart-overview-layout.png "The two available variants of the Telerik and Kendo OrgChart component")</BlueprintImage>

### Framework-Specific Documentation

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

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

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

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

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

</Wrap>