JavaScript Organogram UI Widget

Webix Organogram is a JavaScript (HTML based) widget intended for creating hierarchical diagrams that display links between data items or represent various parts of a complex structure. The appearance of this component is easily customizable. You can set the color of the lines that connect items, change width and height of these items, etc. By modifying the particular CSS classes, you can define custom styling. Event handling mechanism allows changing the behavior of this widget.

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 ConfigurationView Demo

Each item is configurable. Webix allows you to set the size of an item, define such properties as padding and margin, or use any HTML code as item's content.

Styling with CSSView Demo

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.

SelectionView Demo

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.

Customizing List BlocksView Demo

You can create a list block inside of an Organogram's item. It helps to divide the content of an item into logical parts and make it more readable. By default, such items look like a simple HTML list. Optionally, you can separate them visually to emphasize the hierarchy of data.

Browsers Compatibility

The widget supports all modern browsers, including IE8+, Chrome, Safari, Firefox, Opera.

Various Data Sources

The component 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.

Accessible Widget

Organogram meets WAI-ARIA standards. You can create apps that can be used by people who need assistive technologies.

Ready for Touch Devices

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

Integration with Frameworks

UI library can work with jQuery, Angular, React, Vue.js, Backbone frameworks.

Windows and Popups