Effortlessly Generate Radial Tree Diagrams in Blazor
Tags: blazor, productivity, ui, webdev
Published: 2024-01-30 05:06:47

---
title: Effortlessly Generate Radial Tree Diagrams in Blazor
published: true
date: 2024-01-23 11:09:05 UTC
tags: blazor, productivity, ui, webdev
canonical_url: https://www.syncfusion.com/blogs/post/radial-tree-diagrams-in-blazor.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jxhkdi0roewsll2r63n.png
---
Radial tree diagrams are powerful visual aids, providing a representation of hierarchical relationships in a circular layout.

In the [2023 Volume 4](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4") release, the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram "Blazor Diagram") control received a radial tree layout that automatically arranges diagram nodes into an intuitive circular layout, improving the organization of diagrams.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Radial-tree-layout-in-Blazor-Diagram-component.png" alt="Radial tree layout in Blazor Diagram component" style="width:100%">

  <figcaption>Radial tree layout in Blazor Diagram component</figcaption>

</figure>

This blog post delves into how to automatically generate radial tree diagrams in the Syncfusion Blazor Diagram component.

## Getting started with the Syncfusion Blazor Diagram component

Before we begin, make sure you have the Syncfusion Blazor Diagram component installed in your Blazor app. If you haven’t done so already, you can refer to the [Getting Started with the Blazor Diagram component](https://blazor.syncfusion.com/documentation/diagram-classic/getting-started "Getting Started with the Blazor Diagram component") documentation for instructions on how to install and integrate the component.

## Creating structured data for a radial tree layout

The first step in creating a radial tree diagram is to create structured data that defines the hierarchical relationships among nodes. Following is an example of a data source that can be used to generate a radial tree layout.

```csharp
public class RadialTreeDetails
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string Designation { get; set; }
    public string ReportingPerson { get; set; }
} 

public List>RadialTreeDetails< RadialSource = new List>RadialTreeDetails<() {
   new RadialTreeDetails() {
       Id = "parent",
       Name = "Maria Anders",
       Designation = "Managing Director"
   },
   new RadialTreeDetails() {
       Id = "1",
       Name = "Ana Trujillo",
       Designation = "Project Manager",
       ReportingPerson = "parent"
   },
   new RadialTreeDetails() {
       Id = "2",
       Name = "Lino Rodri",
       Designation = "Project Manager",
       ReportingPerson = "parent"
   },
   new RadialTreeDetails() {
       Id = "3",
       Name = "Philip Cramer",
       Designation = "Project Manager",
       ReportingPerson = "parent"
   },
   new RadialTreeDetails() {
       Id = "4",
       Name = "Pedro Afonso",
       Designation = "Project Manager",
       ReportingPerson = "parent"
   },
   new RadialTreeDetails() {
       Id = "5",
       Name = "Anto Moreno",
       Designation = "Project Lead",
       ReportingPerson = "1"
   },
   new RadialTreeDetails() {
       Id = "6",
       Name = "Elizabeth Roel",
       Designation = "Project Lead",
       ReportingPerson = "1"
   },
   new RadialTreeDetails() {
       Id = "7", Name = "Aria Cruz", Designation = "Project Lead",
       ReportingPerson = "1"
   },
   new RadialTreeDetails() {
       Id = "8", Name = "Eduardo Roel", Designation = "Project Lead",
       ReportingPerson = "1"
   },
   new RadialTreeDetails() {
       Id = "9", Name = "Howard Snyd", Designation = "Project Lead",
       ReportingPerson = "2"
   },
   new RadialTreeDetails() {
       Id = "10", Name = "Daniel Tonini", Designation = "Project Lead",
       ReportingPerson = "2"
   },
   new RadialTreeDetails() {
       Id = "11", Name = "Nardo Batista", Designation = "Project Lead",
       ReportingPerson = "89"
   },
   new RadialTreeDetails() {
       Id = "12", Name = "Michael Holz", Designation = "Project Lead",
       ReportingPerson = "89"
   },
   new RadialTreeDetails() {
       Id = "13", Name = "Kloss Perrier", Designation = "Project Lead",
       ReportingPerson = "90"
   },
   new RadialTreeDetails() {
       Id = "14", Name = "Liz Nixon", Designation = "Project Lead",
       ReportingPerson = "3"
   },
   new RadialTreeDetails() {
       Id = "15", Name = "Paul Henriot", Designation = "Project Lead",
       ReportingPerson = "3"
   },
   new RadialTreeDetails() {
       Id = "16", Name = "Paula Parente", Designation = "Project Lead",
       ReportingPerson = "90"
   },
   new RadialTreeDetails() {
        Id = "17", Name = "Matti Kenna", Designation = "Project Lead",
        ReportingPerson = "4"
   },
   new RadialTreeDetails() {
        Id = "18", Name = "Laura Callahan", Designation = "Project Lead",
        ReportingPerson = "4"
   },
   new RadialTreeDetails() {
        Id = "19", Name = "Simon Roel", Designation = "Project Lead",
        ReportingPerson = "4"
   },
   new RadialTreeDetails() {
        Id = "20", Name = "Thomas Hardy", Designation = "Senior S/w Engg",
        ReportingPerson = "12"
   },
   new RadialTreeDetails() {
        Id = "21", Name = "Martín Kloss", Designation = "Senior S/w Engg",
        ReportingPerson = "5",
   },
   new RadialTreeDetails() {
        Id = "23", Name = "Diego Roel", Designation = "Senior S/w Engg",
        ReportingPerson = "7"
   },
   new RadialTreeDetails() {
        Id = "24", Name = "José Pedro", Designation = "Senior S/w Engg",
        ReportingPerson = "8"
   },
   new RadialTreeDetails() {
        Id = "25", Name = "Manu Pereira", Designation = "Senior S/w Engg",
        ReportingPerson = "8"
   },
   new RadialTreeDetails() {
        Id = "26", Name = "Annette Roel", Designation = "Senior S/w Engg",
        ReportingPerson = "25"
   },
   new RadialTreeDetails() {
        Id = "27", Name = "Catherine Kaff", Designation = "Senior S/w Engg",
        ReportingPerson = "8"
   },
   new RadialTreeDetails() {
        Id = "28", Name = "Lúcia Carvalho", Designation = "Senior S/w Engg",
        ReportingPerson = "12"
   },
   new RadialTreeDetails() {
        Id = "29", Name = "Alej Camino", Designation = "Senior S/w Engg",
        ReportingPerson = "13"
   },
   new RadialTreeDetails() {
        Id = "30", Name = "Liu Wong", Designation = "Senior S/w Engg",
        ReportingPerson = "14"
   },
   new RadialTreeDetails() {
        Id = "31", Name = "Karin Josephs", Designation = "Senior S/w Engg",
        ReportingPerson = "14"
   },
   new RadialTreeDetails() {
        Id = "33", Name = "Pirkko King", Designation = "Senior S/w Engg",
        ReportingPerson = "17"
   },
   new RadialTreeDetails() {
        Id = "34", Name = "Karl Jablonski", Designation = "Senior S/w Engg",
        ReportingPerson = "18"
   },
   new RadialTreeDetails() {
        Id = "35", Name = "Zbyszek Yang", Designation = "Senior S/w Engg",
        ReportingPerson = "19"
   },
   new RadialTreeDetails() {
        Id = "36", Name = "Nancy", Designation = "Senior S/w Engg",
        ReportingPerson = "5"
   },
   new RadialTreeDetails() {
        Id = "37", Name = "Anne", Designation = "Senior S/w Engg",
        ReportingPerson = "6"
   },
   new RadialTreeDetails() {
        Id = "38", Name = "Isabel Castro", Designation = "Senior S/w Engg",
        ReportingPerson = "7"
   },
   new RadialTreeDetails() {
        Id = "39", Name = "Nardo Batista", Designation = "Senior S/w Engg",
        ReportingPerson = "9"
   },
   new RadialTreeDetails() {
        Id = "40", Name = "Rene Phillips", Designation = "Senior S/w Engg",
        ReportingPerson = "16"
   },
   new RadialTreeDetails() {
        Id = "41", Name = "Rita Pfalzheim", Designation = "Senior S/w Engg",
        ReportingPerson = "9"
   },
   new RadialTreeDetails() {
        Id = "42", Name = "Janete Limeira", Designation = "Senior S/w Engg",
        ReportingPerson = "11"
   },
   new RadialTreeDetails() {
        Id = "43", Name = "Christina kaff", Designation = "S/w Engg",
        ReportingPerson = "20"
   },
   new RadialTreeDetails() {
        Id = "44", Name = "Peter Franken", Designation = "S/w Engg",
        ReportingPerson = "21"
   },
   new RadialTreeDetails() {
        Id = "45", Name = "Carlos Schmitt", Designation = "S/w Engg",
        ReportingPerson = "23"
   },
   new RadialTreeDetails() {
        Id = "46", Name = "Yoshi Wilson", Designation = "S/w Engg",
        ReportingPerson = "23"
   },
   new RadialTreeDetails() {
        Id = "47", Name = "Jean Fresnière", Designation = "S/w Engg",
        ReportingPerson = "24"
   },
   new RadialTreeDetails() {
        Id = "48", Name = "Simon Roel", Designation = "S/w Engg",
        ReportingPerson = "25"
   },
   new RadialTreeDetails() {
        Id = "52", Name = "Palle Ibsen", Designation = "S/w Engg",
        ReportingPerson = "29"
   },
   new RadialTreeDetails() {
        Id = "53", Name = "Lúcia Carvalho", Designation = "S/w Engg",
        ReportingPerson = "30"
   },
   new RadialTreeDetails() {
        Id = "54", Name = "Hanna Moos", Designation = "Project Trainee",
        ReportingPerson = "30"
   },
   new RadialTreeDetails() {
        Id = "55", Name = "Peter Citeaux", Designation = "Project Trainee",
        ReportingPerson = "33"
   },
   new RadialTreeDetails() {
        Id = "56", Name = "Elizabeth Mary", Designation = "Project Trainee",
        ReportingPerson = "33"
   },
   new RadialTreeDetails() {
        Id = "57", Name = "Victoria Ash", Designation = "Project Trainee",
        ReportingPerson = "34"
   },
   new RadialTreeDetails() {
        Id = "58", Name = "Janine Labrune", Designation = "Project Trainee",
        ReportingPerson = "35"
   },
   new RadialTreeDetails() {
        Id = "60", Name = "Carine Schmitt", Designation = "Project Trainee",
        ReportingPerson = "11"
   },
   new RadialTreeDetails() {
        Id = "61", Name = "Paolo Accorti", Designation = "Project Trainee",
        ReportingPerson = "38"
   },
   new RadialTreeDetails() {
        Id = "62", Name = "André Fonseca", Designation = "Project Trainee",
        ReportingPerson = "41"
   },
   new RadialTreeDetails() {
        Id = "63", Name = "Mario Pontes", Designation = "Project Trainee",
        ReportingPerson = "6"
   },
   new RadialTreeDetails() {
        Id = "64", Name = "John Steel", Designation = "Project Trainee",
        ReportingPerson = "7"
   },
   new RadialTreeDetails() {
        Id = "65", Name = "Renate Jose", Designation = "Project Trainee",
        ReportingPerson = "42"
   },
   new RadialTreeDetails() {
        Id = "66", Name = "Jaime Yorres", Designation = "Project Trainee",
        ReportingPerson = "20"
   },
   new RadialTreeDetails() {
        Id = "67", Name = "Alex Feuer", Designation = "Project Trainee",
        ReportingPerson = "21"
    },
    new RadialTreeDetails() {
        Id = "70", Name = "Helen Marie", Designation = "Project Trainee",
        ReportingPerson = "24"
    },
    new RadialTreeDetails() {
        Id = "73", Name = "Sergio roel", Designation = "Project Trainee",
        ReportingPerson = "37"
    },
    new RadialTreeDetails() {
        Id = "75", Name = "Janete Limeira", Designation = "Project Trainee",
        ReportingPerson = "29"
    },
    new RadialTreeDetails() {
        Id = "76", Name = "Jonas Bergsen", Designation = "Project Trainee",
        ReportingPerson = "18"
    },
    new RadialTreeDetails() {
        Id = "77", Name = "Miguel Ange", Designation = "Project Trainee",
        ReportingPerson = "18"
    },
    new RadialTreeDetails() {
        Id = "80", Name = "Helvetis Nagy", Designation = "Project Trainee",
        ReportingPerson = "34"
    },
    new RadialTreeDetails() {
        Id = "81", Name = "Rita Müller", Designation = "Project Trainee",
        ReportingPerson = "35"
    },
    new RadialTreeDetails() {
        Id = "82", Name = "Georg Pipps", Designation = "Project Trainee",
        ReportingPerson = "36"
    },
    new RadialTreeDetails() {
        Id = "83", Name = "Horst Kloss", Designation = "Project Trainee",
        ReportingPerson = "37"
    },
    new RadialTreeDetails() {
        Id = "84", Name = "Paula Wilson", Designation = "Project Trainee",
        ReportingPerson = "38"
    },
    new RadialTreeDetails() {
        Id = "85", Name = "Jose Michael", Designation = "Project Trainee",
        ReportingPerson = "37"
    },
    new RadialTreeDetails() {
        Id = "86", Name = "Mauri Moroni", Designation = "Project Trainee",
        ReportingPerson = "40"
    },
    new RadialTreeDetails() {
        Id = "87", Name = "Michael Holz", Designation = "Project Trainee",
        ReportingPerson = "41"
    },
    new RadialTreeDetails() {
        Id = "88", Name = "Alej Camino", Designation = "Project Trainee",
        ReportingPerson = "42"
    },
    new RadialTreeDetails() {
        Id = "89", Name = "Jytte Petersen", Designation = "Project Manager",
        ReportingPerson = "parent"
    },
    new RadialTreeDetails() {
        Id = "90", Name = "Mary Saveley", Designation = "Project Manager",
        ReportingPerson = "parent"
    },
    new RadialTreeDetails() {
        Id = "91", Name = "Robert King", Designation = "Project Manager",
        ReportingPerson = "parent"
    },
    new RadialTreeDetails() {
        Id = "95", Name = "Roland Mendel", Designation = "CSR",
        ReportingPerson = "19"
    },
    new RadialTreeDetails() {
        Id = "98", Name = "Helen Bennett", Designation = "SR",
        ReportingPerson = "42"
    },
    new RadialTreeDetails() {
        Id = "99", Name = "Carlos Nagy", Designation = "SR",
        ReportingPerson = "42"
    },
    new RadialTreeDetails() {
        Id = "100", Name = "Felipe Kloss", Designation = "SR",
        ReportingPerson = "77"
    },
};
```

## Creating a diagram

Next, initialize Syncfusion’s Blazor Diagram component and craft a diagram by incorporating the component into your HTML structure. Add the **SfDiagramComponent** attribute to an HTML tag and explicitly set the height and width attributes to define the dimensions of the diagram container.

```xml
<div class="col-lg-8 control-section" style="width: 100%;">
 <div class="content-wrapper">
  <SfDiagramComponent @ref="diagram" Width="100%" Height="600px" >
  </SfDiagramComponent >
 </div>
</div>
```

## Creating a radial tree layout

To create a radial tree layout, set the layout [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Type "Type property of Blazor Diagram") to [RadialTree](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutType.html#Syncfusion_Blazor_Diagram_LayoutType_RadialTree "RadialTree property of Blazor Diagram") and specify the hierarchical data using the [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ID "ID property of Blazor Diagram"), [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ParentID "ParentID property of Blazor Diagram"), and [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_DataSource "DataSource property of Blazor Diagram") properties.

**XAML**

```xml
<div class="col-lg-8 control-section" style="width: 100%;">
 <div class="content-wrapper">
  <SfDiagramComponent @ref="diagram" Width="100%" Height="600px" >
   <DataSourceSettings DataSource="DataSource" ID="Id" ParentID="ReportingPerson"></DataSourceSettings>
   <Layout @bind-Type="type" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing">
   </Layout>
  </SfDiagramComponent >
 </div>
</div>
```

**C#**

```csharp
@code {

  LayoutType type = LayoutType.RadialTree;
  int HorizontalSpacing = 30;
  int VerticalSpacing = 30;

  public List<RadialTreeDetails> DataSource = RadialSource;

}
```

## Optimizing spacing in radial tree diagrams

When fine-tuning the spacing between each level of a radial tree diagram—both horizontally and vertically—find a balance that enhances both readability and aesthetics. Careful adjustments to the spacing can contribute to a visually appealing and informative diagram.

```bash
int HorizontalSpacing = 30;
int VerticalSpacing = 30;
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Optimizing-spacing-in-Blazor-radial-tree-diagram.png" alt="Optimizing spacing in Blazor radial tree diagram" style="width:100%">

  <figcaption>Optimizing spacing in Blazor radial tree diagram</figcaption>

</figure>

## Zooming and panning

When dealing with a large radial tree on a smaller screen, the challenge lies in maintaining clarity and providing a detailed view. In such scenarios, incorporating zooming and panning functionalities becomes indispensable.

You can zoom in and out of a diagram using the Ctrl + mouse wheel shortcut key.

Refer to the following code example, and feel free to visit our [Blazor Playground](https://blazorplayground.syncfusion.com/BNhgsVsuJKbMggcJ "Blazor Playground") to explore this feature more.

**XAML**

```xml
<SfDiagramComponent @ref="diagram" Width="100%" Height="800px" InteractionController="InteractionTool">

</SfDiagramComponent>
```

**C#**

```csharp
@code{

  DiagramInteractions InteractionTool = DiagramInteractions. ZoomPan;

}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Zooming-and-panning-in-Blazor-radial-tree-diagram.gif" alt="Zooming and panning in Blazor radial tree diagram" style="width:100%">

  <figcaption>Zooming and panning in Blazor radial tree diagram</figcaption>

</figure>

## Exporting

You can easily export the radial tree diagram to PNG, JPEG, and SVG image formats.

Refer to the following code example and visit our [Blazor Playground](https://blazorplayground.syncfusion.com/VjVqsrCkTlOzprzm "Blazor Playground") to explore this feature more.

```xml
<input type="button" value="Export" @onclick="Export" />
<div> 
  <SfDiagramComponent @ref="diagram" Width="100%" Height="800px" >
  </SfDiagramComponent>
<div>

@code{

  SfDiagramComponent diagram;

  Private async Task Export()
  {
    DiagramExportSettings export = new DiagramExportSettings();
    await diagram.ExportAsync(“RadialTree” , DiagramExportFormat.PNG, export);
  }
}
```

## Reference

To gain hands-on experience with all the listed features, you can access a comprehensive example on our [Blazor Playground](https://blazorplayground.syncfusion.com/rjBUWrMOfLmpezce "Blazor Playground").

## Conclusion

Thanks for reading! We’ve explored how to create a radial tree layout with the Syncfusion [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram "Blazor Diagram") component. This versatile component extends its capabilities beyond radial trees, enabling the seamless development of flowcharts, organizational charts, floor plans, and BPMN charts!

If you would like to try out the Diagram, you can download our free trial. You can also check our [live demo](https://blazor.syncfusion.com/demos/diagramcomponent/radialtree?theme=fluent "Blazor Diagram Live demo") and [documentation](https://blazor.syncfusion.com/documentation/diagram/layout/radial-tree "Radial Tree Layout in Blazor Diagram") for detailed explanations.

Contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/blazor-components "Syncfusion Feedback Portal") with any questions. We are always happy to assist you!

## Related blogs

- [Introducing the New Blazor Data Form Component](https://www.syncfusion.com/blogs/post/new-blazor-data-form.aspx "Blog: Introducing the New Blazor Data Form Component")
- [Blazor Synchronized Charts: The Perfect Tool for Trade Analysis](https://www.syncfusion.com/blogs/post/blazor-synchronized-charts.aspx "Blog: Blazor Synchronized Charts: The Perfect Tool for Trade Analysis")
- [What’s New in Blazor: 2023 Volume 4](https://www.syncfusion.com/blogs/post/whats-new-blazor-2023-volume-4.aspx "Blog: What’s New in Blazor: 2023 Volume 4")
- [Easily Integrate the Syncfusion Blazor PDF Viewer in Your .NET MAUI App](https://www.syncfusion.com/blogs/post/blazor-pdf-viewer-in-dotnet-maui.aspx "Blog: Easily Integrate the Syncfusion Blazor PDF Viewer in Your .NET MAUI App")