Basic Primitives

Basic Primitives is a 100% JavaScript component library for building general purpose diagrams without manual nodes layout.

  • Increase font size
  • Default font size
  • Decrease font size

Selection Path Mode

If total square size of items exceeds available screen size, there is no possibility to show all of them and chart should use various strategies to show the most important information. By default organizational chart always shows primitives.orgdiagram.Config.cursorItem and all its children and parents up to the rootItem in hierarchy in maximized template form. The same rule applies to selected items. For all other less important items chart is allowed by default to fold them into dots or lines.

Selection path is items between root item and selected item. Selected item defined with primitives.orgdiagram.Config.selectedItems collection. User can force to show selection path with option primitives.orgdiagram.Config.selectionPathMode  set to primitives.orgdiagram.SelectionPathMode.FullStack or permit layout manager to collapse it to dots or lines with primitives.orgdiagram.SelectionPathMode.None.

When we need to compare two or three selected items location in Organizational chart it is important to show selection path items for them. In case of large number of selected items it is better to hide selection paths in order to save as much space as possible and fit chart into screen.

Pay attention that org chart always shows selection path for cursor item. So in case when selected item is cursor item  the setting primitives.orgdiagram.Config.selectionPathMode to primitives.orgdiagram.SelectionPathMode.None is ignored.




#4 Filippo 2018-10-18 07:18

is there a way for customize which boxes are mimized or open?


I click on a box with childrens,his personal brothers and a father, and I want to maximize the childrends, but minimized the brothers and his father
#3 Administrator 2014-02-11 16:41
Quoting Anonymous:
Is there a way to slow down the animation when the dot is clicked and a full image appers?

Add cursor animation. So user would catch visually item it clicked.
#2 Anonymous 2014-02-11 16:08
Is there a way to slow down the animation when the dot is clicked and a full image appers?
#1 denys rodriguez 2014-02-04 14:01
How I can change the way the children are minimized instead of circles are square.

Add comment

Do you need?


Do you use?

JavaScript Frameworks

Do you use?

PDF & Image Export Support