ApexTree - Installation and Getting started

The Apextree is a javascript library built on SVG that helps to create organizational or hierarchical charts.

Installation

To add the Apextree to your project and its dependencies, install the package from npm.

npm install apextree

Usage

import ApexTree from 'apextree'

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

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

 const data = {
   ...(nested data with format provided below)
 }
 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);

Tree Options

The layout can be configured by either setting the properties in the table below by passing a second arg to Apextree with these properties set. The latter takes precedence.

Options | Default | Description --- |------------------------------| --- width | 400 | The width of graph container height | 400 | The height of graph container direction | top | The direction of the tree to start rendering. Possible values: top, bottom, left and right contentKey | name | The key of content in passed data object siblingSpacing | 50 | The spacing between sibling nodes childrenSpacing | 50 | The spacing between children and parent highlightOnHover | true | Enable/disable highlight on hover containerClassName | root | The class name for the root container canvasStyle | None | The css styles for canvas root container enableToolbar | false | Enable/disable graph toolbar nodeWidth | 50 | The width of graph nodes nodeHeight | 30 | The height of graph nodes nodeTemplate | defaultNodeTemplate | The HTML template for nodes nodeBGColor | #FFFFFF | The background color of nodes nodeBGColorHover | #FFFFFF | The background color on hover of nodes borderWidth | 1 | The border width of the nodes in pixels borderStyle | solid | The border style of the nodes borderRadius | 5px | The border radius of the nodes in pixels borderColor | #BCBCBC | The border color of the nodes borderColorHover | #5C6BC0 | The border color on hover of the nodes edgeWidth | 1 | The width for the edges edgeColor | #BCBCBC | The color for the edges edgeColorHover | #BCBCBC | The color for the edges when highlighted enableTooltip | false | Enable tooltip on hover of nodes tooltipId | apextree-tooltip-container | The tooltip HTML element id tooltipTemplate | defaultNodeTemplate | The HTML template for tooltip tooltipMaxWidth | 100 | The max width of the tooltip tooltipBorderColor | #BCBCBC | The border color of tooltip tooltipBGColor | #FFFFFF | The background color of tooltip fontSize | 14px | The size of font of nodes fontFamily | None | The font family of nodes fontWeight | 400 | The font weight of nodes fontColor | #000000 | The font color of nodes

Default node template

const defaultNodeTemplate = (content: string) => {
  return `<div style='display: flex;justify-content: center;align-items: center; text-align: center; height: 100%;'>${content}</div>`;
};

Expected data format

{
  "id": "1", 
  "name": "A",
  "children": []
}

Passed data object should contain id, name and children.

For id key, value of id can be unique otherwise edge highlight won't work as expected.

For name key, if using other than name then specify key name in contentKey option

For children key, it contains list of child objects

Example

const data = {
  "id": "1",
  "name": "A",
  "children": [
     {
       "id": "2",
       "name": "B",
       "children": [
         {
           "id": "3",
           "name": "C"
         },
         {
            "id": "4",
            "name": "D"
         }
      ]
     }
  ]
}