Create an Org Chart to Elegantly Visualize Hierarchical Data in Blazor WebAssembly
Tags: blazor, webdev, csharp
Published: 2021-12-10 11:56:07

---
title: Create an Org Chart to Elegantly Visualize Hierarchical Data in Blazor WebAssembly
published: true
date: 2021-12-09 11:22:37 UTC
tags: blazor, webdev, csharp, 
canonical_url: https://www.syncfusion.com/blogs/post/create-an-org-chart-to-elegantly-visualize-hierarchical-data-in-blazor-webassembly.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikk6xpkflcyiet3chgy3.png
---

An organizational chart (also known as “org chart”) is a graphic representation of the internal structure of an organization or any other data collection. Employees can utilize org charts to learn about their department’s structure, as well as the structure of other departments.

The Syncfusion [Blazor Diagram component](https://www.syncfusion.com/blazor-components/blazor-diagram "Link to Blazor Diagram Component") is a feature-rich component for creating or visualizing interactive diagrams. It allows users to create organizational charts using either C# code or a visual interface with seamless interaction and editing capabilities.

In this blog, we will learn how to create an interactive org chart to visualize your hierarchical data using the Blazor Diagram component.

## Add the Blazor Diagram component to an application

Here, we are going to include the Blazor Diagram component in a Blazor WebAssembly application.

**Note:** Before proceeding, refer to the [getting started with the Blazor Diagram component](https://blazor.syncfusion.com/documentation/diagram-component/getting-started "Documentation link to Getting Started in Blazor Diagram Component") documentation.

1. First, install the [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram/ "Link to the Syncfusion.Blazor.Diagram NuGet package") NuGet package in the app using the NuGet package manager.
2. Now, add the style resources through CDN or from the NuGet package in the  **HEAD ** element of the  **~/wwwroot/index.cshtml ** page.
```html
<head>
    ....
    ....
     <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
</head>
```
3. Then, open the **~/\_Imports.Blazor ** file and import the **Syncfusion. Blazor.Diagram**  package in it.
```js
@using Syncfusion.Blazor.Diagram
```
4. Open the **Startup.**** cs **file and add the services required for the Syncfusion components using the** services.AddSyncfusionBlazor() **method. Before that, add the ** services.AddSyncfusionBlazor() **method in the** ConfigureServices** function, like in the following code example.
```js
@using Syncfusion.Blazor;

namespace BlazorApplication
{
    public class Startup
    {
        ....
        ....
        public void ConfigureServices(IServiceCollection services)
        {
            ....
            ....
            services.AddSyncfusionBlazor();
        }
    }
}
```
5. Next, add the Blazor Diagram Component to the  **Pages ** folder of your Razor file. Refer to the following code example.
```html
<SfDiagramComponent Width="100%" Height="600px"/>
```

**Note:** For more details, refer to the documentation for creating [Blazor diagram nodes](https://blazor.syncfusion.com/documentation/diagram-component/nodes/nodes "Documentation link to Node in Blazor Diagram Component") and the documentation for creating [Blazor diagram connectors](https://blazor.syncfusion.com/documentation/diagram-component/connectors/connectors "Documentation link to Connector in Blazor Diagram Component") with labels.

## Creating an org chart

Let’s see how to create a simple org chart in your Blazor WebAssembly application.

### #1: Define the data source

We need a data source or node collection to populate the organization chart on the diagram canvas.

First, let’s create a model class to construct the [data source](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_DataSource "Link to the class DataSource of Blazor Diagram Component"). Define the employee’s ID, role, and reporting person in your organization in the model class. You can add a color property to improve the UI’s design. Also, you can specify your custom properties if necessary.

Refer to the following code.

```csharp
    // Create a model class for the data source.
    public class EmployeeData
    {
        public string ID { get; set; }
        public string Role { get; set; }
        public string Color { get; set; }
        public string Manager { get; set; }
    }
```

Now, create a data source for the org chart and populate the data source records as nodes. We should specify the parent and child relationships in the organization while giving the records. In the organizational layout, each record in the data source will be created as a separate node.

Refer to the following code.

```csharp
//Define the dataSource.
public List<EmployeeData> DataSource = new List<EmployeeData>()
{
    new EmployeeData(){ID= "parent", Role= "Board", Color = "#71AF17", Manager = "" },
    new EmployeeData() { ID = "1",Role= "General manager", Color = "#71AF17", Manager = "parent" },
     new EmployeeData() { ID = "2", Role= "Human resource manager", Color = "#1859B7", Manager = "1", },
    new EmployeeData() { ID = "3", Role= "Trainers", Color = "#2E95D8", Manager = "2" },
    // ...
    // .. .
};
```

### #2: Binding the data source to the layout

Now, bind the data source with the Blazor Diagram component, as seen in the following code.

```html
 <SfDiagramComponent>
    <DataSourceSettings ID="ID" ParentID="Manager" DataSource="DataSource"></DataSourceSettings> </SfDiagramComponent>
```

Once the data source is bound and the parent-child relationships are configured, define the automatic layout properties to create the organization chart.

```html
<Layout @bind-Type="@type" @bind-Orientation="@orientation" GetLayoutInfo="GetLayoutInfo" >
    </Layout>
```

### #3: Customization

You can do the following customization in the org chart:

1. The [HorizontalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_HorizontalSpacing "Link to the HorizontalSpacing property of Blazor Diagram Component") and [VerticalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_VerticalSpacing "Link to the VerticalSpacing property of Blazor Diagram Component") properties of the layout allow you to set the horizontal and vertical spacing between the nodes, respectively.

1. The Layout’s [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Margin "Link to the Margin property of Blazor Diagram Component") property allows you to set blank space. All these parameters are supported by two-way binding to modify the default or current values.
```html
<Layout @bind-Type="@type" HorizontalSpacing="30" VerticalAlignment="30" >
        <LayoutMargin Bottom="10" Top="10" Right="10" Left="10"></LayoutMargin>
    </Layout>
```

1. The [GetLayoutInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_GetLayoutInfo "Link to the GetLayoutInfo property of Blazor Diagram Component") callback method will be triggered for each node during the layout process. This method helps us to provide instructions to the automatic-layout process regarding how to generate the org chart.

1. In an org chart, the employees are often represented directly below a representation of the person to whom they report. And although reporting to the same person, some employees may have less authority than others.  In our Blazor Diagram Component, we can assign only one assistant in the entire org chart layout.  
Refer to the following code.
```csharp
private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options)
    {
        Node node = obj as Node;
        // Add an assistant to the root node.
        if ((node.Data as OrganizationalDetails).Role == "General manager")
        {
            options.Assistants.Add(options.Children[0]);
            options.Children.RemoveAt(0);
        }
        options.Type = SubTreeAlignments.Balanced;
        options.Orientation = SubTreeOrientation.Horizontal;
        return options;
    }
```

Finally, the Razor file will look like the following.

```js
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.Internal

<SfDiagramComponent @ref="@Diagram" Height="690px" InteractionController="@InteractionController.ZoomPan" NodeCreating="@NodeCreating" ConnectorCreating="@ConnectorCreating">
    <DataSourceSettings ID="ID" ParentID="Manager" DataSource="DataSource"></DataSourceSettings>
    <Layout @bind-Type="@type" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-Orientation="@orientation" @bind-VerticalSpacing="@VerticalSpacing" @bind-HorizontalAlignment="@horizontalAlignment" @bind-VerticalAlignment="@verticalAlignment" GetLayoutInfo="GetLayoutInfo">
        <LayoutMargin @bind-Top="@top" @bind-Bottom="@bottom" @bind-Right="@right" @bind-Left="@left"></LayoutMargin>
    </Layout>
    <SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
</SfDiagramComponent>

@code
{
    SfDiagramComponent Diagram;
    LayoutOrientation orientation = LayoutOrientation.TopToBottom;
    LayoutType type = LayoutType.OrganizationalChart;
    HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto;
    VerticalAlignment verticalAlignment = VerticalAlignment.Auto;
    int HorizontalSpacing = 30;
    int VerticalSpacing = 30;
    double top = 50;
    double bottom = 50;
    double right = 50;
    double left = 50;
    double offset = 20;

  
    // Create a class for the data source recorded as a new type.
    public class EmployeeData
    {
        public string ID { get; set; }
        public string Role { get; set; }
        public string Color { get; set; }
        public string Manager { get; set; }
    }

    //DataSource Items.
    public List<EmployeeData> DataSource = new List<EmployeeData>()
    {
    new EmployeeData(){ID= "parent", Role= "Board", Color = "#71AF17", Manager = "" },
    new EmployeeData() { ID = "1",Role= "General manager", Color = "#71AF17", Manager = "parent" },
    new EmployeeData() { ID = "11", Role= "Assistant general manager",Color = "#71AF17", Manager = "1" },
    new EmployeeData() { ID = "2", Role= "Human resource manager", Color = "#1859B7", Manager = "1", },
    new EmployeeData() { ID = "3", Role= "Trainers", Color = "#2E95D8", Manager = "2" },
    new EmployeeData() { ID = "4", Role= "Recruiting team",Color = "#2E95D8", Manager = "2" },
    new EmployeeData() { ID = "5", Role= "Finance asst. manager", Color = "#2E95D8", Manager = "2" },
    new EmployeeData() { ID = "6", Role= "Design manager", Color = "#1859B7", Manager = "1" },
    new EmployeeData() { ID = "7",Role= "Design supervisor",Color = "#2E95D8", Manager = "6" },
    new EmployeeData() { ID = "8",Role= "Development supervisor",Color = "#2E95D8", Manager = "6" },
    new EmployeeData() { ID = "9",Role= "Drafting supervisor", Color = "#2E95D8", Manager = "6" },
    new EmployeeData() { ID = "10",Role= "Operations manager",Color = "#1859B7", Manager = "1" },
    new EmployeeData() { ID = "11",Role= "Statistics department",Color = "#2E95D8", Manager = "10" },
    new EmployeeData() { ID = "12",Role= "Logistics department",Color = "#2E95D8", Manager = "10" },
    new EmployeeData() { ID = "16", Role= "Logistics department", Color = "#1859B7", Manager = "1" },
    new EmployeeData() { ID = "17",Role= "Overseas sales manager",Color = "#2E95D8", Manager = "16" },
    new EmployeeData() { ID = "18", Role= "Petroleum manager", Color = "#2E95D8", Manager = "16" },
    new EmployeeData() { ID = "20",Role= "Service department manager",Color = "#2E95D8", Manager = "16" },
    new EmployeeData() { ID = "21", Role= "Quality control department", Color = "#2E95D8", Manager = "16" },
    };

    private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options )
    {
        Node node = obj as Node;
        options.Offset = -50;
        if ((node.Data as EmployeeData).Role == "General manager")
        {
            options.Assistants.Add(options.Children[0]);
            options.Children.RemoveAt(0);
        }
        options.AlignmentType = SubTreeAlignmentType.Balanced;
        options.Orientation = Orientation.Horizontal;
        options.Offset = offset;
        return options;
    }

    private void NodeCreating(IDiagramObject obj)
    {
        Node node = obj as Node;
        if (node.Data is System.Text.Json.JsonElement)
        {
            node.Data = System.Text.Json.JsonSerializer.Deserialize<EmployeeData>(node.Data.ToString());
        }
        EmployeeData organizationData = node.Data as EmployeeData;
        node.Width = 120;
        node.Height = 50;
        node.Style.Fill = organizationData.Color;
        ShapeAnnotation annotation = new ShapeAnnotation()
        {
            Content = organizationData.Role,
            Offset = new DiagramPoint(0.5, 0.5),
            Style = new TextStyle() { Color = "white" }
        };
        node.Annotations = new DiagramObjectCollection<ShapeAnnotation>() { annotation };
    }
    // Define the default values for the Connector object.
    private void ConnectorCreating(IDiagramObject DiagramObject)
    {
        Connector connector = (DiagramObject as Connector);
        connector.Type = ConnectorSegmentType.Orthogonal;
        connector.TargetDecorator.Shape = DecoratorShape.None;
        connector.SourceDecorator.Shape = DecoratorShape.None;
    }

}
```

After executing the previous code, you will get an org chart that looks like the following image.

![Designing an Organisational Chart Using the Blazor Diagram Component](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/Designing-an-Organisational-Chart-Using-Blazor-Diagram-Component.png)
<figcaption>Designing an Organisational Chart Using the Blazor Diagram Component</figcaption>

## Drag-and-drop (interactively editing a hierarchy)

In an organization, employees’ designations and departments may change frequently. You can modify the org chart interactively by dragging and dropping child (employee) nodes or parent (department) nodes to desired locations. To enable editing of the org chart’s hierarchical structure, add the following code in the  **drop**  method of the Blazor Diagram component.

```html
 <SfDiagramComponent DragDrop="Drop">
 
              @*// ... 
             // ...*@
 </SfDiagramComponent>

    private async Task Drop(DropEventArgs args)
    {

        DiagramSelectionSettings selector = args.Element as DiagramSelectionSettings;
        if (selector.Nodes.Count > 0)
        {
            string id = selector.Nodes[0].InEdges[0];
            Connector conn = diagram.GetObject(id) as Connector;
            // Source connection has changed for dropped connector.
            conn.SourceID = (args.Target as Node).ID;
            await diagram.DoLayout();
        }
    }
```

The previous code snippet directly modifies the connectors’ source ID alone. But the data source will not be updated automatically. Refer to the following code to update the data source while dragging and dropping the nodes in the org chart.

```html
 <SfDiagramComponent DragDrop="Drop">
 
              @*// ... 
             // ...*@
 </SfDiagramComponent>

    private async Task Drop(DropEventArgs args)
    {

        DiagramSelectionSettings selector = args.Element as DiagramSelectionSettings;
        if (selector.Nodes.Count > 0)
        {
            // Refresh the data source when dragging and dropping the shape over another shape.
            Node targetNode = args.Target as Node;
            EmployeeData targetNodeData = DataSource.Find(data => data.ID == (targetNode.Data as EmployeeData).ID);
            EmployeeData drogNodeData = DataSource.Find(data => data.ID == (selector.Nodes[0].Data as EmployeeData).ID);
            drogNodeData.Manager = targetNodeData.ID;
            diagram.ClearSelection();
            await diagram.RefreshDataSource();
        }
    }
```

Refer to the following GIF image.

![Dragging and dropping nodes in org chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/Dragging-and-dropping-nodes-in-org-chart.gif)<figcaption>Dragging and dropping nodes in org chart</figcaption>

## Zooming and panning

It is difficult to visualize a huge organization chart on a small screen. In such a scenario, zooming and panning support helps provide a better view of chart data. Use the following code to enable zooming and panning support in the Blazor Diagram component.

```html
<SfDiagramComponent Tool="@DiagramTools.ZoomPan">

</SfDiagramComponent>
```

Then, use the **Ctrl + mouse wheel** operation to zoom in and out on the org chart.

**Note:** For complete details, refer to the [Create Org Chart using the Blazor Diagram Component documentation](https://blazor.syncfusion.com/documentation/diagram/layout/organizational-chart "Documentation link to Organizational chart in Blazor Diagram Component").

## GitHub reference

Refer to the examples for creating an org chart using the Blazor Diagram Component in WebAssembley on [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/main/Samples/AutomaticLayout/Organization%20Chart "Link to create an organization chart in Blazor Diagram Component GitHub demo") and [Syncfusion’s website](https://blazor.syncfusion.com/demos/diagramcomponent/organization-model?theme=bootstrap5 "Link to the Example of Organization Chart in Blazor Diagram Component").

## Conclusion

Thanks for reading! In this blog, we have seen how to create an org chart using the Syncfusion [Blazor Diagram component](https://www.syncfusion.com/blazor-components/blazor-diagram/blazor-library-organizational-chart "Link to Blazor Diagram Component"). Try out the steps given in this blog and elegantly visualize the hierarchical structure of any data!

If you would like to try Syncfusion components, you can download our [free trial](https://www.syncfusion.com/downloads/blazor/confirm "Link to the free evaluation of the Syncfusion Essential Studio"). Also, check out our other [Blazor demos](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5 "Link to Syncfusion Blazor live demos") and [documentation](https://blazor.syncfusion.com/documentation/introduction "Documentation link to Syncfusion Blazor Components") for detailed explanations and the facts you need to proceed further.

You can also contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Link to the Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Build World-Class Blazor WebAssembly Apps with Globalization and Localization](https://dev.to/syncfusion/build-world-class-blazor-webassembly-apps-with-globalization-and-localization-186g "Link to Build World-Class Blazor WebAssembly Apps with Globalization and Localization blog")
- [Simple Steps to Upload Files to Azure Blob Storage in Blazor App](https://dev.to/karthickramasamy08/simple-steps-to-upload-files-to-azure-blob-storage-in-blazor-app-jk4-temp-slug-237493 "Link to Simple Steps to Upload Files to Azure Blob Storage in Blazor App blog")
- [Schedule Your Tasks Like A Pro in Blazor Applications](https://dev.to/syncfusion/schedule-your-tasks-like-a-pro-in-blazor-applications-3lh1 "Link to Schedule Your Tasks Like A Pro in Blazor Applications blog")
- [3 Different Hosting Models in Blazor](https://dev.to/syncfusion/3-different-hosting-models-in-blazor-5ckn "Link to 3 Different Hosting Models in Blazor blog")