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:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        tags: {
            Management: {
                template: "rony"
            }
        },     
        nodes: [
            { id: 1, tags: ["Management"] },        
        ...
    });
    

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

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {    
        nodes: [
            { id: 1, tags: ["red"] },        
        ...
    });

    // CSS
    .node.red rect {
        fill: #750000;
    }
    

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

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        tags:{
            customMenuItems:{
                nodeMenu:{
                    add: {text: "Add New" }
              	}
            }
          },
        ...
    });
    

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

Code example:

 
    var 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:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        tags:{
            "subLevels1": {
                subLevels: 0
            },
          },
        ...
    });