BALKAN OrgChart React - React Org Chart Library | Docs

Navigation ​

You can navigate the chart in the following ways:

  1. Mouse Scroll
  2. Pan
  3. Zoom

Mouse Scroll ​

Vertical and Horizontal scroll ​

Set mouseScroll to:

javascript
mouseScroll={OrgChartJS.action.scroll}

Then you can navigate using:

  • Scroll up/down
  • Hold Shift to scroll left/right
  • Hold Ctrl to zoom with the mouse wheel
  • On devices like Apple Magic Mouse or Logitech G502, you can scroll in all directions without holding Shift

Scroll

Add scroll bars using:

javascript
showXScroll={true}
showYScroll={true}

Scroll Bars

Horizontal scroll only ​

In order to enable horizontal scroll bar set showXScroll to true. Also you have an option to use the mouse scroll set mouseScroll to OrgChart.action.xScroll

Horizontal Scroll

Vertical scroll only ​

Now set the showYScroll to true and change mouseScroll to OrgChart.action.yScroll

Vertical Scroll

Scroll sensitivity ​

To increase or decrease scroll sensitivity change OrgChart.scroll.smooth and OrgChart.scroll.speed constants, the default values are:

javascript
OrgChartJS.scroll.smooth = 12;
OrgChartJS.scroll.speed = 120;

Also you can change the scroll sensitivity for a specific browser. For example:

javascript
OrgChartJS.scroll.safari = {
    smooth: 12,
    speed: 500
};
OrgChartJS.scroll.ie = { smooth: 12, speed: 200 };
OrgChartJS.scroll.edge = { smooth: 12, speed: 200 };
OrgChartJS.scroll.chrome = { smooth: 12, speed: 200 };
OrgChartJS.scroll.firefox = { smooth: 12, speed: 200 };
OrgChartJS.scroll.opera = { smooth: 12, speed: 200 };

Pan ​

Pan/move, left-click and hold mouse button in the chart and drag the mouse in any direction. You cannot disable the Pan navigation.

Zoom ​

Change mouseScroll to OrgChart.action.zoom:

Zoom

Ctrl + Zoom ​

Change mouseScroll to OrgChart.action.ctrlZoom to use Ctrl + zoom without affecting mouse scroll for up/down and left/right:

Ctrl+Zoom

Mini map ​

Show mini map over the tree.

Set miniMap option to true.

Mini Map

Mini map properties ​

You have several properties for the mini map, that you can set:

  • colors - array of colors that are set for the different subtree levels
  • selectorBackgroundColor - the "background" color in the mini map
  • focusStroke - the color of the focus rectangle stroke
  • opacity - number from 0 to 1 - the opacity of the "background"
  • border - the CSS border definition of the mini map
  • width - width in pixels
  • height - height in pixels
  • padding - padding of the mini map in pixels
  • position - object with top, left, right and bottom properties to position the mini map. You can use padding, undefined or pixels
  • draggable - boolean - the default value is true

Example:

Mini Map Properties

Moving the tree programmatically ​

Here is how you can move it holding a button down:

Moving Programmatically

Here is how you can move it by starting and stopping the function:

Moving Programmatically With Start/Stop

Moving nodes to the visible area ​

You can use the moveNodesToVisibleArea method to move an array of nodes to the visible area.

Here is a code demo, where we move nodes with ids 10 and 12 in the visible area:

Moving Nodes to visible area