Organogram is a JavaScript Webix widget intended for creating hierarchical diagrams that display links between posts and jobs in an organization or represent various parts of a complex structure.

Webix Organogram Widget
View demo

Easy to learn

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


You can customize the appearance of this JavaScript widget according to the requirements of your project. It is possible to adjust the size of Organogram items, their content, arrangement and even more. What is more, to make the widget more informative you can add different HTML-objects to its items.

Styling with CSS

It is possible to adjust the whole style of Organogram or its separate elements through CSS. You may also apply your own CSS rules to create a unique style of this widget.


Webix Organogram allows you to enable selection functionality in a codeline.

List Inside Block

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

Webix Organogram

Various Data Sources

Webix Organogram allows loading data in JSON or XML data formats. These data formats are easily customizable therefore you can use Organogram with your existing web-services. Since Organogram widget is based on the TreeStore, you can load data from a database on the server as well.

Browsers Compatibility

Organogram performs well in the latest versions of browsers such as IE, Mozilla Firefox, Opera, Chrome, and Safari.

Ready for Touch Devices

This JavaScript hierarchical diagram runs flawlessly and looks perfect on all types of touch devices.

Windows and Popups
Development Tools