Available only in PRO Edition
You can customize any element of Webix Organogram. All you need to do is to redefine the needed attributes of the related CSS class in the <style> block of your page. The untouched attributes will take default values.
<style>
.webix_organogram{
background-color: #2196f3;
}
</style>
In the above example we redefined only the background color. All the other attributes defined in the '.webix_organogram' class took the default values.
You can also redefine the default styles or apply your own CSS rules for chart items.
Use the $css property in item data to specify item style in one of the two ways:
To illustrate the described techniques, we will define the .item_top CSS rule and apply it to the item of the 1st level. For the item of the second level we'll set specific CSS properties directly in the data set.
Finally, we'll redefine the .webix_selected rule to change background color of selected items.
<style>
// "top" ccs rule definition
.item_top{
background-color: #ffe0b2;
border-color: #ffcc80;
}
// the style for selected item
.webix_selected{
background-color: #2196f3 !important;
border-color: #2196f3 !important;
}
</style>
<script>
orgChart = new webix.ui({
container:"box",
view:"organogram",
data:[
{id:"root", value:"Board of Directors", $css: "item_top", data:[
{id:"1", value:"Managing Director",
$css:{background: "#ffe0b2", "border-color": "#ffcc80"}, data:[
{id:"1.1", value:"Base Manager"},
{ id:"1.2", value:"Business Development Manager"}
...
]}
]}
]
});
</script>
You can see the result in the picture below:
Related sample: Styling Organogram
Back to top