Tags

With tags option you can:

• Set specific template for tagged nodes
• Set specific CSS for tagged nodes
• Set a specific node menu
• Set node as assistant or a partner
• Set the node level
• Set a subtree configuration (see Sub Trees)

Set specific template for tagged nodes. See Multiple Templates in one chart for more details.

Code example:

 
Copy code
let chart = new OrgChart(document.getElementById("tree"), {
    tags: {
        Management: {
            template: "ula"
        }   
    },     
    nodes: [
        { id: 1 },  
        { id: 2, pid: 1, tags: ["Management"] }    
    ]    
});
    

Set specific CSS for tagged nodes. See CSS customization for more details.

Code example:

 
Copy code
.node.red rect {
    fill: #750000;
}
    

 
Copy code
let chart = new OrgChart(document.getElementById("tree"), { 
    nodes: [
        { id: 1 },  
        { id: 2, pid: 1, tags: ["red"] }    
    ]    
});
    

Set node menu items for tagged nodes. See Menus for more details.

Code example:

 
Copy code
let chart = new OrgChart(document.getElementById("tree"), {
    nodeMenu: {
        details: { text: "Details" },
        add: {text: "Add New" }
    },
    tags:{
        customMenuItems:{
            nodeMenu:{
                add: {text: "Details" }
            }
        }
    },
    nodes: [
        { id: 1 },  
        { id: 2, pid: 1, tags: ["customMenuItems"] }    
    ] 
});
    

Set a template for an assistant. See Assistant for more details.

Code example:

 
Copy code
let chart = new OrgChart(document.getElementById("tree"), {
    tags: {
        assistant: {
            template: "mery"
        }
    },
    nodes: [
        { id: 1 },
        { id: 2, pid: 1, tags: ["assistant"] }
    ]
});     
    

Set the node level. See Layout for more details.

Code example:

 
Copy code
let chart = new OrgChart(document.getElementById("tree"), {
    tags:{
        "subLevels1": {
            subLevels: 1
        },
    },
    nodes: [
        { id: 1 },
        { id: 2, pid: 1 },
        { id: 3, pid: 1, tags: ["subLevels1"] }
    ]
});