JavaScript Organogram UI widget

Webix Organogram is a JavaScript (HTML) widget intended for creating hierarchical diagrams that display links between data items or represent various parts of a complex structure.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Samples of PHP, Node.js, .NET integration
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Easy to learn

Due to the fact that the structure and API of Organogram are similar to those of JavaScript Tree, you will spend less time on learning this component.

Items configuration

Each item is configurable. Webix allows you to set item size, padding and margin, or provide any HTML markup for item content.

Styling with CSS

The appearance of this component is easily customizable. It is possible to adjust the whole style of Organogram or its separate elements through CSS thus creating a unique style of this widget.

Selection

Webix Organogram allows you to enable selection functionality in a codeline. You can also handle selection events to perform some actions when an item is selected.

Click on any item.

List inside block

If you have an organization with branched structure and want to visualize it in a comprehensible format, you can present child elements of some items in the form of a list.

Customizing list blocks

By default a list block with child items looks like a simple non-ordered list. You can use special settings to separate items visually, which lets emphasize the hierarchy of data and point at their dependence on the same parent item.

Nested list blocks

Each list block can start its own child family to visualize the hierarchy and depict the full chain of dependant items.