We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


The traditional organizational chart (often called an org chart or organization chart) is the graphical representation of an organization’s structure. Its purpose is to illustrate the relationships and relative ranks of positions within the organization. The Syncfusion Vue Diagram component offers a variety of features to easily create organizational charts.

Visualize organizational charts from data sources

The Syncfusion Vue Diagram component supports visualizing an organizational chart from an external data source. In addition, data in any format can be easily converted, mapped, and consumed in the diagram by setting a few properties.

Generate the organizational chart from external data source in Vue Diagram component

High-performance automatic layout algorithm

The built-in automatic layout algorithm is specifically designed for organizational charts to arrange the parent and child node positions automatically.

Arrange parent and child nodes in organizational chart using automatic layout feature in Vue Diagram component


You can easily create different types of organizational chart templates and visualize them with better UI design.

Visualize organizational chart with better UI design by creating custom UI templates in Vue Diagram component


The Syncfusion Vue Diagram component supports defining assistants in the organizational chart. Assistants are child items that have a different relationship with the parent node. They are laid out in a dedicated part of the tree.

Define assistants in organizational chart using Vue Diagram component


Use different orientation options such as top to bottom, left to right, right to left, and bottom to top to arrange the organizational chart based on your requirements.

Arrange organizational chart with different orientation types using Vue Diagram component

Leaf-level alignment

Arrange the leaf-level nodes in the organization chart to be aligned to the left, right, or center horizontally, or to the top, bottom, or middle vertically.


The Syncfusion Vue Diagram component supports customizing the spacing between each level in both horizontal and vertical directions, and allows you to define a margin around the organizational chart.

Customize the spacing between each levels in the organizational chart using Vue Diagram component

Expand and Collapse Children

You can show or hide the children nodes to view only the relevant nodes in the diagram.

Show/hide the children and view only the relevant nodes using Vue Diagram component

Drag and Drop

You can easily modify the organizational structure interactively by dragging the child or parent nodes and then dropping them on the required locations.

Modify the organizational structure interactively using Vue Diagram component


Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon