Show / Hide Table of Contents

Navigation

You can navigate through the following ways:
  1. Mouse Scroll
  2. Pan
  3. Zoom

Mouse Scroll

The dafault mouseScrool(mousescroll event) option is zoom.To disable zoom, you need to set another option.

Vertical and Horizontal scroll

Set mouseScrool option to OrgChart.action.scroll and you will be able to navigate with the mouse:

  • Scroll up/down
  • Press Shift key to sroll left/right
  • On Apple Magic Mouse or Logitech G502 you can scroll left/right/up/down without pressing the Shift key




Add scroll bars with the options showXScroll: OrgChart.scroll.visible and showYScroll: OrgChart.scroll.visible




Horizontal scroll only

In order to enable horizontal scroll bar set showXScroll to OrgChart.scroll.visible. Aslo you have an option to use the mouse scroll set mouseScrool to OrgChart.action.xScroll. Here is an example:




Vertical scroll only

Now set the showYScroll to OrgChart.scroll.visible and chage mouseScrool to OrgChart.action.yScroll


Scroll sensitivity

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

 
     OrgChart.scroll.smooth = 12;
     OrgChart.scroll.speed = 12;  
    
Also you can change the sroll sensitivity for a specific browser. For example:
 
     OrgChart.scroll.safari = {
        smooth: 12,
        speed: 500
    };
     OrgChart.scroll.ie = { smooth: 12, speed: 200 };
     OrgChart.scroll.edge = { smooth: 12, speed: 200 };
     OrgChart.scroll.chrome = { smooth: 12, speed: 200 };
     OrgChart.scroll.firefox = { smooth: 12, speed: 200 };
     OrgChart.scroll.opera = { smooth: 12, speed: 200 };
    

Pan

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

Zoom

Chage mouseScrool to OrgChart.action.zoom. Here is the result:


Ctrl + Zoom

Chage mouseScrool to OrgChart.action.ctrlZoom. Here is the result:


Toolbar

You can use the Toolbar buttons to change the zoom:


Mini map

Show mini map over the tree.

Set miniMap option to true.

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 bodred 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:

Moving the tree programmatically

You can move the tree programmatically using the methods moveStart and moveEnd

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


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


Moving nodes to the visible area

You can use the moveNodesToVisibleArea method to move 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: