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',
        },
      ],
    },
  ],
};