Basic Primitives

Simplified user experience. JavaScript jQuery UI Widgets Diagrams.

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

JavaScript/HTML Organizational, Family, PERT & Dependencies Chart


  • Large Hierarchical Charts Visualization
  • Paper style Organizational Charts
  • Multi-parent hierarchical chart
  • Family Tree
  • Dependencies Chart
  • PERT chart
  • Financial Ownership Diagram

View the embedded image gallery online at:

Pure JavaScript

  • 100% client side JavaScript layout and rendering.
  • Implemented in popular jQuery UI Widget specification, it has dependencies on jQuery and jQuery UI libraries.
  • Works in all major browsers Internet Explorer, Chrome, Firefox, Safari and mobile browsers. Supports graphics rendering in VML, SVG and Canvas modes depending on browser. Warning: The web site itself does not support IE6-IE7 so if you need to verify widget in IE6, please download demo archive.

Free for Non-commercial

Do you want to use Basic Primitives orgDiagram for a personal website, a school site or a non-profit organization? Then you don't need the author's permission, just go on and use Basic Primitives orgDiagram. For commercial websites and projects, see License and Pricing.


One of the key features of Basic Primitives orgDiagram that under any of the licenses, free or not, you are allowed to download the source code and make your own edits. This allows personal modifications and a great flexibility.

Auto Layout

The main problem of paper form organizational charts implementation is sparse items distribution on layout, so large gaps between items make chart hard to overview and navigate. Sometimes chart is so big that it has huge screen size blank areas between items. This issue makes useless the whole idea of visualizing organizational chart. At the same time computer UI allows to scale hierarchy and fit it into screen, but in that case items become small and unreadable. The primary goal of this Organizational chart implementation is to resolve these issues and make good use of them. Widget finds the best way to display large hierarchies within available screen space without or with minimal scrolling not affecting usability. 

  • Shape of hierarchy visualization. Widget minimizes as many items as needed in order to fit chart into available space. It produces zoom out affect and allows to navigate around chart.
  • Easy navigation between branches and within parent stack of cursor item. Current cursor item, its children, siblings and all parents up to the root of hierarchy are always shown in their full size. It is local zoom in affect.
  • Visualization of mutual relationship between two or more items in hierarchy. All selected items are always displayed in their full size and since all other items would be minimized it allows to show items from different branches side by side within available screen space.

Provides simple API for the most common use cases:

  • Default item template has: Title, Image & Description
  • Vertical Group Titles
  • Selection Check Box
  • User buttons panel
  • Labels
  • Annotations

Flexible API for more complex use cases

  • Customizable item, highlight and cursor templates.
  • Layout options
  • Events


  • Works with jQuery UI Dragable & Droppable interactions.
  • Works in AngularJS directive
  • Works in ASP.NET controls


  • Through a full API you can add, remove and modify individual items and change many other properties at any time after organizational chart creation. Widget update time is as fast as its navigation.


jQuery UI Widget
See change log for details

What is your?

JavaScript Widgets Library

What is your?

JavaScript MVC framework
Do you use graphics libraries?