BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

Scale and Padding ​

Initial scale ​

scaleInitial: OrgChart.match.boundaryIfOutside ​

Auto zooms out the chart so that it stays within the visible boundaries both horizontally and vertically (fit to screen).
This is the default value.

Code iconEdit in BALKAN Code

Custom value ​

You can manually increase or decrease the scale.
The root node will always remain centered.

Code iconEdit in BALKAN Code

scaleInitial: OrgChart.match.boundary ​

Auto scales the chart to fully fit within both width and height boundaries.

Code iconEdit in BALKAN Code

scaleInitial: OrgChart.match.height ​

Auto scales the chart so all nodes are visible vertically (fit to height).

Code iconEdit in BALKAN Code

scaleInitial: OrgChart.match.width ​

Auto scales the chart so all nodes are visible horizontally (fit to width).

Code iconEdit in BALKAN Code

Controls ​

You can use Controls to adjust zoom:

Code iconEdit in BALKAN Code

Padding ​

The padding option sets spacing around all sides of the chart.

javascript
padding: 20

Separation between nodes ​

You can control spacing using:

  • levelSeparation
  • siblingSeparation
  • subtreeSeparation
  • mixedHierarchyNodesSeparation

Separation illustration

Example ​

javascript
levelSeparation: 50

Change dynamically ​

javascript
chart._layoutConfigs.base.levelSeparation = 200;
chart.draw();

You can also apply different separation settings for specific groups (nodes) and their subtrees.