Available only in PRO Edition

Customizing Organogram

The dimensions of items in Organogram, their arrangement and content, as well as the position of the component in relation to the container can be customized with the help of the item type.

Common configuration

The following properties can be set in the type to customize the whole component:

  • autowidth - boolean, adjusts the container to fit the chart width
webix.ui({
    view: "organogram",
    autowidth: true,
    ...
});
  • autoheight - boolean, adjusts the container to fit the chart height
webix.ui({
    view: "organogram",
    autoheight: true,
    ...
});

Items configuration

The appearance of Organogram items can also be changed by setting the following properties in the type parameter:

  • lineColor - color of the line that connects items in organogram
webix.ui({
    view: "organogram",
    type: {
        lineColor: "#90caf9"
    },
    ...
});
  • width - the width of an item in pixels, must be a fixed number
webix.ui({
    view: "organogram",
    type:{
         width: 120 
    },
    ...
});
  • height - the height of an item, "auto" by default, fits to the content's height
webix.ui({
    view: "organogram",
    type:{
       height: 100
    },
    ...
});
  • padding - the space between the organogram and the container borders
webix.ui({
    view: "organogram",
    type:{
        padding: 20
    },
    ...
});
  • marginX - horizontal space between two items
webix.ui({
    view: "organogram",
    type:{
        marginX: 20
    },
    ...
});
  • marginY - vertical space between two items
webix.ui({
    view: "organogram",
    type:{
        marginY: 20
    },
    ...
});
  • template - defines inner html for each item, "#value#" by default
{
    template: webix.template("#value#")
}

If you want to set any other html content for some item you should redefine the template property. For example, let's set images for chart items:

var orgChart = new webix.ui({
    container:"testA",
    view:"organogram",
    template: function(obj){
        var image = obj.img;
 
        if(image){
            html = "<img src='"+image+"' class='photo'>";
        }
        return (image||"")+obj.value;
    }
});

You can also apply a custom template to specify elements of the list. Let's mark the list items by the mark ">". To parse this sign correctly, we will set it as the "&gt;" html character code.

var orgChart = new webix.ui({
    container:"testA",
    view:"organogram",
    template: function(marks){
        var html = "";
        if(marks && marks.list_item){
            html = " &gt; ";
        }
            return html;
    }
});

Related sample:  Templates

Creating list blocks

There's a possibility to make a list block inside of an item.

To create a list block, you need to specify the $type property with the value "list" in the parent of the items that you want to turn into a list.

Let's have a look at the organogram in the above picture. The items of the 4th level are united into lists.

For example, to unite the child items of the "Research" item ("Base research" and "Collaborative research with industries"), we should set the $type property with the value "list" in its definition.

The same actions should be performed with the "Development", "Teaching" and "Training" items and their child items.

The code will look like this:

var orgChart = new webix.ui({
    container:"testA",
    view:"organogram",
    data: [
        {id:"1", value:"Center Director", data:[
            { id:"1.1", value:"Research &amp; Development", data:[
                { id:"1.1.1", value:"Research", $type: "list", data:[
                    { id:"1.1.1.1", value:"Base research" },
                    { id:"1.1.1.2", value:"Collaborative research with industries" }
                ]},
                { id:"1.1.2", value:"Development", $type: "list", data:[
                    { id:"1.1.2.1", value:"Faculty development workshops" },
                    { id:"1.1.2.2", value:"Student development" }
                ]}
            ]},
            ...
        ]}
    ]
});

Related sample:  Lists

Customizing List Blocks

By default, list items in the block are placed into a standard HTML list. To separate them visually and show their dependence on one and the same parent, define the following values within the Organogram type:

  • listMarginX - space between the vertical line and block items;
  • listMarginY - space between two block items in the line.

webix.ui({
    view:"organogram",
    type:{
        listMarginX: 20,
        listMarginY: 20
    }
});

Related sample:  Lists Blocks

Adding nested lists

You can also add nested lists in the Organogram. For this, you need to apply the $type:list property both to the parent item of the list block and to its children items.

The organogram in the above image has a two-level nesting on the 3rd and 4th levels. The "Research & Development" item is the parent of the first level of nesting, while "Research" and "Development" items are the parents of the two nested list blocks.

Let's check the code:

var orgChart = new webix.ui({
    container:"testA",
    view:"organogram",
    type:{
        marginX:40,
        listMarginX: 20,
        listMarginY: 20
    },
    data: [
        {id:"1", value:"Center Director", data:[
            { id:"1.1", value:"Research &amp; Development", $type: "list", data:[
                { id:"1.1.1", value:"Research", $type: "list", data:[
                    { id:"1.1.1.1", value:"- Base research" },
                    { id:"1.1.1.2", value:"- Collaborative research with industries"}
                ]},
                { id:"1.1.2", value:"Development", $type: "list", data:[
                    { id:"1.1.2.1", value:"- Faculty development workshops" },
                    { id:"1.1.2.2", value:"- Student development" }
                ]}
            ]},
            ...
        ]}
    ]
})

To unite the child items of the "Research & Development" item, we have set the $type:list property into the related data object. Then, to add nested list blocks, we have added the $type:list property into the "Research" and "Development" data items.

Related sample:  Nested List Blocks

Back to top
If you have not checked yet, be sure to visit site of our main product Webix lightweight js framework and page of organogram javascript product.