Example of Organization Chart in React Diagram Component

/
/
OrganizationModel

This sample illustrates a simple business management structure that is built from an external data source. Hierarchical tree layout algorithm is used to build organizational charts. Customizing the orientation and structure of the organizational chart is illustrated in this example.

More Details...

Loading....
Description

This example shows how to generate an organizational chart from an external data source. The spacing between the objects can also be customized in the chart. The horizontalSpacing and{" "} verticalSpacing properties of layout can be used to customize the space between objects in a tree. The layoutOrientation property of layout can be used to change the orientation of the chart. The getLayoutInfo property of layout can be used to customize the tree structure. To change the tree structure, choose any template in the palette.

Injecting Module

The diagram component’s features are segregated into individual feature-wise modules. To generate diagrams from an external data source, inject DataBinding module into services. To automatically arrange the objects in an organizational chart, inject HierarchicalTree module into services.