BALKAN OrgChart React - React Org Chart Library | Docs

Performance ​

OrgChart React works well with 100,000 nodes.
For such big data it may take several seconds for the first load from the backend server, depending on the data size.

For so many nodes we suggest loading only the visible node data, and then on node click requesting the full node data from the server.

OrgChart React is tested with 103,020 nodes on a PC with 8GB RAM:

  • 8MB JSON (4 fields) → ~5 seconds
  • 12MB JSON (5 fields incl. photo) → ~7 seconds

Here is an example of visualizing a big chart:

javascript
lazyLoading={true}
showXScroll={OrgChart.scroll.visible}
mouseScrool={OrgChart.action.xScroll}
layout={OrgChart.layout.mixed},
scaleInitial={OrgChart.match.height}

Where:

  • lazyLoading – only visible nodes are rendered in the DOM (default: true)
  • showXScroll: OrgChart.scroll.visible – horizontal scroll bar is visible
  • mouseScrool: OrgChart.action.xScroll – navigation with mouse scroll
  • layout: OrgChart.mixed – last nodes aligned vertically
  • scaleInitial: OrgChart.match.height – auto scale to fit vertically

5000 nodes with images ​

5000 nodes

25000 nodes chart:

25000 nodes