Creating a Basic Tree

Creating a basic org chart using ApexTree.js

To create a basic tree with minimal configuration, write as follows:

<div id="svg-tree"></div>

const data = {
  "id": "idA",
  "name": "A",
  "children": [
     {
       "id": "idB",
       "name": "B",
       "children": [
         {
           "id": "idC",
           "name": "C"
         },
         {
            "id": "idD",
            "name": "D"
         }
      ]
     }
  ]
};

const options = {
   width: 700,
   height: 700,
   nodeWidth: 120,
   nodeHeight: 80,
   childrenSpacing: 100,
   siblingSpacing: 30,
   direction: 'top',
   canvasStyle: 'border: 1px solid black; background: #f6f6f6;',
 };

 const tree = new ApexTree(document.getElementById('svg-tree'), options);
 const graph = tree.render(data);

Reset Password

Creating a Basic Tree

Stay Updated