OrgChart JS Documentation

Performance

OrgChart JS supports up to 5000 nodes in one chart, thanks to the lazy loading feature.

If you have large organization, the best way to display it is to set the following properties:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        lazyLoading: true,
        showXScroll: BALKANGraph.scroll.visible,
        mouseScroolBehaviour: BALKANGraph.action.xScroll,
        layout: BALKANGraph.mixed,
        scaleInitial: BALKANGraph.match.height,
        ...
    });
    

Where:

  • lazyLoading means that only nodes that are visible will be loaded in the DOM. The default value is true.
  • showXScroll: BALKANGraph.scroll.visible, the vertical scroll bar will be visble.
  • mouseScroolBehaviour: BALKANGraph.action.xScroll, the chart can be navigated with the mouse scroller
  • layout: BALKANGraph.mixed, the last nodes will be aligned vertically.
  • scaleInitial: BALKANGraph.match.height, the scalle will be auto calculated in order all nodes to be vissible vertically.

Here is an example with 5000 nodes with images.

One of the next versions of OrgChart JS will support millions of nodes.