BALKAN OrgChart React - React Org Chart Library | Docs

Scale and Padding ​

Initial scale ​

scaleInitial: OrgChartJS.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.

match.boundaryIfOutside

Custom value ​

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

custom value

scaleInitial: OrgChartJS.match.boundary ​

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

match.boundary

scaleInitial: OrgChartJS.match.height ​

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

match.height

scaleInitial: OrgChartJS.match.width ​

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

match.width

Controls ​

You can use Controls to adjust zoom:

custom value

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}