Creating Radial Tree Diagrams with Syncfusion Angular Diagram Library: A Complete Guide
Tags: angular, dataviz, ui, webdev
Published: 2023-07-25 14:36:41

---
title: Creating Radial Tree Diagrams with Syncfusion Angular Diagram Library: A Complete Guide
published: true
date: 2023-07-25 12:37:20 UTC
tags: angular, dataviz, ui, webdev
canonical_url: https://www.syncfusion.com/blogs/post/angular-radial-tree-diagram.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnfkelhaz6c2gj0i6sj1.png
---
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](https://www.syncfusion.com/angular-components/angular-diagram "Angular Diagram Library") 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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Creating-a-Radial-Tree-Diagram-Using-Syncfusion-Angular-Diagram-Library-1.png" alt="Creating a Radial Tree Diagram Using Syncfusion Angular Diagram Library" style="width:100%">

  <figcaption>Creating a Radial Tree Diagram Using Syncfusion Angular Diagram Library</figcaption>

</figure>

## 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](https://ej2.syncfusion.com/angular/documentation/diagram/getting-started/?no-cache=1 "Getting started with 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.

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

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

```xml
<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**

```xml
<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**

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

```js
public layout: Object = {
    type: 'RadialTree',
    verticalSpacing: 60,
    horizontalSpacing: 60,
    root: 'Category',
};
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Optimizing-the-spacing-between-nodes-in-Angular-radial-tree-diagram-1.png" alt="Optimizing the spacing between nodes in Angular radial tree diagram" style="width:100%">

  <figcaption>Optimizing the spacing between nodes in Angular radial tree diagram</figcaption>

</figure>

## 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**

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

**JS**

```js
export class AppComponent {
  //enable the pan tool
  public tool: DiagramTools = DiagramTools.ZoomPan;
}
```
<figure>

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

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

</figure>

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

```js
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](https://stackblitz.com/edit/angular-4jaao4?file=tsconfig.json,src%2Fapp.component.ts,src%2Fapp.component.html,src%2Fdiagram-data.json,src%2Findex.html "Angular Radial Tree Diagram demo on StackBlitz"), [web](https://ej2.syncfusion.com/angular/demos/#/material/diagram/radial-tree "Angular Radial Tree Diagram live demo"), and [documentation](https://helpej2.syncfusion.com/angular/documentation/diagram/automatic-layout#radial-tree-layout "Getting started with Angular Radial Tree layout") pages.

## Conclusion

Thanks for reading! In this blog, we’ve seen how to create a radial tree diagram using the Syncfusion [Angular Diagram](https://www.syncfusion.com/angular-components/angular-diagram "Angular Diagram Library") 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 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/angular "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 2 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2023-volume-2.aspx "Blog: Syncfusion Essential Studio 2023 Volume 2 Is Here!")
- [Angular 16 Unveiled: Discover the Top 7 Features](https://www.syncfusion.com/blogs/post/angular-16-top-7-features.aspx "Blog: Angular 16 Unveiled: Discover the Top 7 Features")
- [Mastering Strictly Typed Reactive Forms in Angular: A Step-by-Step Guide](https://www.syncfusion.com/blogs/post/strictly-typed-reactive-forms-in-angular.aspx "Blog: Mastering Strictly Typed Reactive Forms in Angular: A Step-by-Step Guide")
- [A Complete Guide to Creating a Mind Map Using Angular Diagram Component](https://www.syncfusion.com/blogs/post/mind-map-using-angular-diagram.aspx "Blog: A Complete Guide to Creating a Mind Map Using Angular Diagram Component")