Generate Responsive Customizable Tree Diagrams To Visualize Hierarchies – Tree.js

Tree.js is a lightweight JavaScript library that allows you to create responsive and customizable interactive tree diagrams from an array of JS objects.

It is ideal for visualizing any data with parent-child relationships, such as organization charts, folder structures, decision trees, and more. Compared to other libraries, Tree.js focuses on being lightweight, configurable, and easy to theme.

Its built-in API enables complete control over node formats, tooltips, interactivity, and other aspects of the tree view. Since styling uses CSS/SASS, you can easily customize colors, fonts, etc.

How to use it:

1. Download the package and load the following files in the document.

<link rel="stylesheet" href="/dist/tree.js.css">
<script src="/dist/tree.js"></script>

2. Create a DIV container for the tree diagram and pass the options to the data-tree-options attribute. All possible options:

• data: []
• maximumRows: 10
• spacing: 10
• maximumBoxHeight: 200
• reverseOrder: false
• showBoxGaps: true
• swapSizes: false
• showBoxGapsForChildren: false
• allowBoxExpanding: true
• showTitle: true
• showChildren: true
• showDescriptions: true
• showContents: true
• tooltipDelay: 750
• showChildrenToggle: true
• showDescriptionsToggle: true
• showContentsToggle: true
• showCategorySelector: true
• showCategorySelectionDropDown: true
• useDecreasingHeightsForBoxes: true
• showRefreshButton: false
• onBeforeRenderComplete( element ): null
• onRenderComplete( element ): null
• onBoxClick( boxDetails ): null
• onBackCategory( category ): null
• onNextCategory( category ): null
• onSetCategory( category ): null
• onRefresh( element ): null
• onDestroy( element ): null

<div id="myTree" data-tree-options="{'data': [], 'onRenderComplete': yourCustomJsFunction}">
</div>

3. The data array should be like these:

{
  id: "1",
  name: "Data Set 1",
  description: "Description 1.",
  backgroundColor: "rgba(255, 255, 255, 1 )",
  textColor: "black",
  borderColor: "rgba(0, 0, 0, 0.75 )",
  value: 10,
  category: category,
  showValue: true,
  children: [
    // sub items here
  ],
  content: "Additional Content in HTML." 
};

4. Available configurations.

$tree.setConfiguration({
  backButtonText: "Back",
  nextButtonText: "Next",
  showChildrenLabelText: "Show Children",
  showDescriptionsLabelText: "Show Descriptions",
  showContentsLabelText: "Show Contents",
  noDataMessage: "There is currently no data to view.",
  expandToolTipText: "Expand",
  contractToolTipText: "Contract",
  safeMode: true,
  highlightAllDomElementTypes: "*",
  refreshButtonText: "Refresh"
})

5. API methods.

// refresh
$tree.refresh(elementId)
// refresh all instance
$tree.refreshAll()
// move to the prev category
$tree.moveToPreviousCategory(elementId)
// move to the next category
$tree.moveToNextCategory(elementId)
// get ids
$tree.getIds()
// destroy the instance
$tree.destroy()
// destroy all instances
$tree.destroyAll()

Changelog:

v0.4.0 (02/25/2024)

• Added new callbacks, and methods.

v0.3.0 (02/20/2024)

• Added new options, callbacks, and methods.