Effortlessly Generate Radial Tree Diagrams in Blazor

Jollen Moyani - Jan 30 - - Dev Community

Radial tree diagrams are powerful visual aids, providing a representation of hierarchical relationships in a circular layout.

In the 2023 Volume 4 release, the Blazor Diagram control received a radial tree layout that automatically arranges diagram nodes into an intuitive circular layout, improving the organization of diagrams.

Radial tree layout in Blazor Diagram component

Radial tree layout in Blazor Diagram component

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 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.

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"
    },
};
Enter fullscreen mode Exit fullscreen mode

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.

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

Creating a radial tree layout

To create a radial tree layout, set the layout Type to RadialTree and specify the hierarchical data using the ID, ParentID, and DataSource properties.

XAML

<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>
Enter fullscreen mode Exit fullscreen mode

C#

@code {

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

  public List<RadialTreeDetails> DataSource = RadialSource;

}
Enter fullscreen mode Exit fullscreen mode

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.

int HorizontalSpacing = 30;
int VerticalSpacing = 30;
Enter fullscreen mode Exit fullscreen mode

Optimizing spacing in Blazor radial tree diagram

Optimizing spacing in Blazor radial tree diagram

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 to explore this feature more.

XAML

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

</SfDiagramComponent>
Enter fullscreen mode Exit fullscreen mode

C#

@code{

  DiagramInteractions InteractionTool = DiagramInteractions. ZoomPan;

}
Enter fullscreen mode Exit fullscreen mode

Zooming and panning in Blazor radial tree diagram

Zooming and panning in Blazor radial tree diagram

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 to explore this feature more.

<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);
  }
}
Enter fullscreen mode Exit fullscreen mode

Reference

To gain hands-on experience with all the listed features, you can access a comprehensive example on our Blazor Playground.

Conclusion

Thanks for reading! We’ve explored how to create a radial tree layout with the Syncfusion 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 and documentation for detailed explanations.

Contact us through our support forum, support portal, or feedback portal with any questions. We are always happy to assist you!

Related blogs

Image
Unlocking Durham: Your Go-To Guide for Reliable Mobile Locksmith Services
Image
Meble, które Odmienią Twoje Wnętrze: Trendy na 2023 Rok
Image
AVKit Integration in iOS 18 - #30DaysOfSwift

beginners, tutorial, swift, swiftui
Image
beberapa ciri web broker judi slots online sah paling dipercaya
Image
larangan dalam taruhan judi slots online paling besar
Image
Daftar Judi Online Paling dipercaya dan Sangat Beri keuntungan
Image
10 Accident Lawyers In Virginia That Are Unexpected
Image
Abstractions, Components, Services, and Libraries in Software Projects

abstractions, architecture, softwareengineering
Image
A New Trend In Best Mesothelioma Attorney
Image
Ask Me Anything: 10 Responses To Your Questions About Asbestosis Settlement Amounts
Image
Trick Cepat Peroleh Situs Judi Online Dapat dipercaya? Ini Jalannya!
Image
Revolutionizing Business Operations with AI Voice Assistants

ai, chatgpt, voicebot, voiceui
Image
Phantasm: A Human Approval Layer For AI Agents

machinelearning, opensource, news, tooling
Image
Hacktoberfest 2024: My Open-Source Journey

devchallenge, hacktoberfestchallenge, hacktoberfest, opensource
Image
In Demand Careers For The Future? A Simple Insight

career, ai, leadership
Image
Efficiently Manage Errors in Next.js with a Comprehensive Developer Solution

nextjs, javascript, npm, node
Image
17 Signs That You Work With Electric Wall Mounted Fire Place
Image
CoTracker3: A Point Tracker Using Real Videos

computervision, machinelearning, ai, datascience
Image
Unlocking Durham: Your Go-To Guide for Mobile Locksmith Services
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .