Radial tree layout in EJ2 JavaScript Diagram control

15 Dec 202419 minutes to read

A Radial tree layout is a diagram that presents information in a hierarchical structure, with a central node at the core of the diagram. The central node represents the main concept or topic, and branches extend outward in a radial fashion, creating a tree-like structure. The layout root property can be used to define the root node of the layout. When no root node is set, the algorithm automatically considers the node without any incoming edges (InEdges connector count of 0) as the root node. To create radial tree, the type of the layout as RadialTree.

The RadialTree layout provides support for adding space between the nodes. The HorizontalSpacingand VerticalSpacing properties of the layout allow you to set the space between the nodes. The arrangement results in an ever-expanding concentric arrangement with radial proximity to the root node indicating the node level in the hierarchy.

Radial tree with DataSource

You can create a radial tree layout with DataSource. The following code example illustrates how to create a radial tree layout using a data source.

ej.diagrams.Diagram.Inject(
    ej.diagrams.DataBinding,
    ej.diagrams.HierarchicalTree
  );
  const radialSource = [
    { 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: '15',
      Name: 'Paul Henriot',
      Designation: 'Project Manager',
      ReportingPerson: 'parent',
    },
    {
      Id: '18',
      Name: 'Laura Callahan',
      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: '18',
    },
    {
      Id: '8',
      Name: 'Eduardo Roel',
      Designation: 'Project Lead',
      ReportingPerson: '18',
    },
    {
      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: '3',
    },
    {
      Id: '12',
      Name: 'Michael Holz',
      Designation: 'Project Lead',
      ReportingPerson: '3',
    },
    {
      Id: '13',
      Name: 'Kloss Perrier',
      Designation: 'Project Lead',
      ReportingPerson: '4',
    },
    {
      Id: '14',
      Name: 'Liz Nixon',
      Designation: 'Project Lead',
      ReportingPerson: '4',
    },
    {
      Id: '16',
      Name: 'Paula Parente',
      Designation: 'Project Lead',
      ReportingPerson: '15',
    },
    {
      Id: '17',
      Name: 'Matti Kenna',
      Designation: 'Project Lead',
      ReportingPerson: '15',
    },
  ];
  
  var items = new ej.data.DataManager(radialSource, new ej.data.Query().take(5));
  
  var diagram = new ej.diagrams.Diagram({
    width: '100%',
    height: '590px',
    snapSettings: { constraints: 0 },
    layout: {
      type: 'RadialTree',
      horizontalSpacing: 30,
      verticalSpacing: 30,
      root: 'parent',
    },
    dataSourceSettings: {
      id: 'Id',
      parentId: 'ReportingPerson',
      dataManager: items,
    },
  
    getNodeDefaults: (obj, diagram) => {
      obj.height = 20;
      obj.width = 20;
      obj.backgroundColor = 'lightgrey';
      obj.style = {
        fill: '#6BA5D7',
        strokeWidth: 2,
        strokeColor: '#6BA5D7',
      };
      return obj;
    },
    getConnectorDefaults: (connector, diagram) => {
      connector.style = {
        strokeColor: '#6BA5D7',
        strokeWidth: 2,
      };
      connector.targetDecorator.style.fill = '#6BA5D7';
      connector.targetDecorator.style.strokeColor = '#6BA5D7';
      connector.targetDecorator.shape = 'None';
      connector.type = 'Straight';
      return connector;
    },
  });
  diagram.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

NOTE

If you want to convert the data source into layout, you need to inject DataBinding along with RadialTree module in the diagram.

Radial tree with nodes and connectors

You can render a radial tree layout without using DataSource. The following code demonstrates how to render a radial tree layout without using data source.

ej.diagrams.Diagram.Inject(
  ej.diagrams.DataBinding,
  ej.diagrams.HierarchicalTree
);
const nodes = [
  { id: 'Maria Anders' },
  { id: 'Ana Trujillo' },
  { id: 'Lino Rodri' },
  { id: 'Philip Cramer' },
  { id: 'Pedro Afonso' },
  { id: 'Paul Henriot' },
  { id: 'Laura Callahan' },
  { id: 'Anto Moreno' },
  { id: 'Elizabeth Roel' },
  { id: 'Aria Cruz' },
  { id: 'Eduardo Roel' },
  { id: 'Howard Snyd' },
  { id: 'Daniel Tonini' },
  { id: 'Nardo Batista' },
  { id: 'Michael Holz' },
  { id: 'Kloss Perrier' },
  { id: 'Liz Nixon' },
  { id: 'Paula Parente' },
  { id: 'Matti Kenna' },
];
const connectors = [
  {
    id: 'Maria Anders-Ana Trujillo',
    sourceID: 'Maria Anders',
    targetID: 'Ana Trujillo',
  },
  {
    id: 'Maria Anders-Lino Rodri',
    sourceID: 'Maria Anders',
    targetID: 'Lino Rodri',
  },
  {
    id: 'Maria Anders-Philip Cramer',
    sourceID: 'Maria Anders',
    targetID: 'Philip Cramer',
  },
  {
    id: 'Maria Anders-Pedro Afonso',
    sourceID: 'Maria Anders',
    targetID: 'Pedro Afonso',
  },
  {
    id: 'Maria Anders-Paul Henriot',
    sourceID: 'Maria Anders',
    targetID: 'Paul Henriot',
  },
  {
    id: 'Maria Anders-Laura Callahan',
    sourceID: 'Maria Anders',
    targetID: 'Laura Callahan',
  },
  {
    id: 'Ana Trujillo-Anto Moreno',
    sourceID: 'Ana Trujillo',
    targetID: 'Anto Moreno',
  },
  {
    id: 'Ana Trujillo-Elizabeth Roel',
    sourceID: 'Ana Trujillo',
    targetID: 'Elizabeth Roel',
  },
  {
    id: 'Laura Callahan-Aria Cruz',
    sourceID: 'Laura Callahan',
    targetID: 'Aria Cruz',
  },
  {
    id: 'Laura Callahan-Eduardo Roel',
    sourceID: 'Laura Callahan',
    targetID: 'Eduardo Roel',
  },
  {
    id: 'Lino Rodri-Howard Snyd',
    sourceID: 'Lino Rodri',
    targetID: 'Howard Snyd',
  },
  {
    id: 'Lino Rodri-Daniel Tonini',
    sourceID: 'Lino Rodri',
    targetID: 'Daniel Tonini',
  },
  {
    id: 'Philip Cramer-Nardo Batista',
    sourceID: 'Philip Cramer',
    targetID: 'Nardo Batista',
  },
  {
    id: 'Philip Cramer-Michael Holz',
    sourceID: 'Philip Cramer',
    targetID: 'Michael Holz',
  },
  {
    id: 'Pedro Afonso-Kloss Perrier',
    sourceID: 'Pedro Afonso',
    targetID: 'Kloss Perrier',
  },
  {
    id: 'Pedro Afonso-Liz Nixon',
    sourceID: 'Pedro Afonso',
    targetID: 'Liz Nixon',
  },
  {
    id: 'Paul Henriot-Paula Parente',
    sourceID: 'Paul Henriot',
    targetID: 'Paula Parente',
  },
  {
    id: 'Paul Henriot-Matti Kenna',
    sourceID: 'Paul Henriot',
    targetID: 'Matti Kenna',
  },
];

var diagram = new ej.diagrams.Diagram({
  width: '100%',
  height: '590px',
  snapSettings: { constraints: 0 },
  layout: {
    type: 'RadialTree',
    horizontalSpacing: 30,
    verticalSpacing: 30,
    root: 'parent',
  },
  nodes: nodes,
  connectors: connectors,

  getNodeDefaults: (obj, diagram) => {
    obj.height = 20;
    obj.width = 20;
    obj.backgroundColor = 'lightgrey';
    obj.style = {
      fill: '#6BA5D7',
      strokeWidth: 2,
      strokeColor: '#6BA5D7',
    };
    return obj;
  },
  getConnectorDefaults: (connector, diagram) => {
    connector.style = {
      strokeColor: '#6BA5D7',
      strokeWidth: 2,
    };
    connector.targetDecorator.style.fill = '#6BA5D7';
    connector.targetDecorator.style.strokeColor = '#6BA5D7';
    connector.targetDecorator.shape = 'None';
    connector.type = 'Straight';
    return connector;
  },
});
diagram.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

NOTE

If you want to use radial tree layout in diagram, you need to inject RadialTree in the diagram.

Radial tree