Creating Radial Tree Diagrams with Syncfusion Angular Diagram Library: A Complete Guide
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (29).NET MAUI  (214)Angular  (110)ASP.NET  (51)ASP.NET Core  (83)ASP.NET MVC  (90)Azure  (41)Black Friday Deal  (1)Blazor  (226)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (68)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (81)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (942)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (163)Xamarin  (161)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (157)Chart  (140)Chart of the week  (54)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (70)Development  (658)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (22)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (512)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (614)What's new  (333)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Creating Radial Tree Diagrams with Syncfusion Angular Diagram Library: A Complete Guide

Creating Radial Tree Diagrams with Syncfusion Angular Diagram Library: A Complete Guide

Radial tree diagrams are powerful visual tools for representing hierarchical data in a circular layout. They offer a compact and intuitive way to showcase complex structures such as organizational charts, family trees, or network relationships.

The Syncfusion Angular Diagram is a feature-rich diagram library for visualizing, creating, and editing interactive diagrams. It supports creating flowcharts, organizational charts, mind maps, and BPMN charts either through code or a visual interface.

In this blog, we’ll see how to create radial tree diagrams using the Syncfusion Angular Diagram library.

Creating a Radial Tree Diagram Using Syncfusion Angular Diagram Library
Creating a Radial Tree Diagram Using Syncfusion Angular Diagram Library

Getting started with the Syncfusion Angular Diagram component

Before we begin, ensure you have the Syncfusion Angular Diagram component installed in your Angular application. Refer to the Getting started with the Angular Diagram component documentation for instructions on installing and integrating the component.

Creating structured data for radial tree layout

Let’s create the structured data that defines the hierarchical relationships among nodes in the radial tree layout.

Refer to the following code example to create JSON data that can be used to generate a radial tree layout.

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

Importing required modules for radial tree layout

Next, import the RadialTree and Databinding modules to render the radial tree layout. You can do this by adding the following code to the Diagram component.

import {
  Diagram,
  RadialTree,
} from '@syncfusion/ej2-diagrams';
Diagram.Inject(DataBinding, RadialTree);

Creating a diagram with Angular Diagram component

To create a diagram using the Syncfusion Angular Diagram library, add an HTML tag with the ejs-diagram attribute and specify the height and width attributes to define the size of the diagram container.

Refer to the following code example.

<div class="col-lg-8 control-section" style="width: 100%;">
 <div class="content-wrapper">
  <ejs-diagram #diagram id="diagram" width="100%" height="600px"  
  </ejs-diagram>
 </div>
</div>

Creating a radial tree layout with hierarchy data

To create a radial tree layout, set the layout type property to RadialTree and specify the hierarchical data using the id, parentId, and dataSource properties.

Refer to the following code example.

HTML

<div class="col-lg-8 control-section" style="width: 100%;">
 <div class="content-wrapper">
  <ejs-diagram #diagram id="diagram" width="100%" height="600px"  [layout]='layout' [dataSourceSettings]='data'
  </ejs-diagram>
 </div>
</div>

JS

public layout: Object = {
    type: 'RadialTree',
    verticalSpacing: 50,
    horizontalSpacing: 20,
    root: 'Category',
};

public data: Object = {
    //sets the fields to bind
    id: 'Id',
    parentId: 'ReportingPerson',
    dataSource: new DataManager(this.radialTree),
};

Optimizing spacing in radial tree diagram

You can customize the spacing between each level of the radial tree diagram horizontally and vertically. While doing so, it is essential to maintain a balance that promotes readability and aesthetics. You can create visually appealing and informative diagrams by carefully fine-tuning the spacing.

Refer to the following code example.

public layout: Object = {
    type: 'RadialTree',
    verticalSpacing: 60,
    horizontalSpacing: 60,
    root: 'Category',
};
Optimizing the spacing between nodes in Angular radial tree diagram
Optimizing the spacing between nodes in Angular radial tree diagram

Zooming and panning

Viewing a large radial tree diagram on a small screen can be challenging. Zooming and panning help us to view the diagram in detail.

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

Refer to the following code example to enable zooming and panning features in the Diagram component.

HTML

<ejs-diagram
      #diagram
      id="diagram" width="100%" height="800px" [tool]="tool" >
</ejs-diagram>

JS

export class AppComponent {
  //enable the pan tool
  public tool: DiagramTools = DiagramTools.ZoomPan;
}
Zooming and panning in Angular radial tree diagram
Zooming and panning in Angular radial tree diagram

Exporting

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

Refer to the following code example.

this.diagram.exportDiagram({format: 'PNG', fileName: 'RadialTree'});

References

To gain hands-on experience with all the described features, you can access a comprehensive sample on our StackBlitz, web, and documentation pages.

Conclusion

Thanks for reading! In this blog, we’ve seen how to create a radial tree diagram using the Syncfusion Angular Diagram component. With this component, you can also create flowcharts, organizational charts, floor plans, UML diagrams, and BPMN charts. Try them out and leave your feedback in the comments section!

You can also contact us through our support forumsupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed