OrgChart JS Documentation

Tags

With tags option you can:

  • Set specific template for tagged nodes
  • Set the default state (expand/collapse) for tagged nodes
  • Define a group for tagged nodes
  • Set node as assistant for tagged nodes
  • Set node menu items for tagged nodes

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 the default state (expand/collapse) for tagged nodes. See Expand/Collapse for more details.

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        tags: {
            hide: {
                state: OrgChart.COLLAPSE
            }
        },
        ....
        nodes: [
            { id: "1" },
            { id: "2", tags: ["hide"] },
            { id: "3" }
            ...
        ]
    });
    


Define a group for tagged nodes. See Grouping for more details.

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        tags: {
            HRs: {
                group: true,
                groupName: "HR Team",
                groupState: OrgChart.EXPAND,
                template: "group_grey"
            }
        },
        nodes: [
            { id: 1, tags: ["HRs"] }
        ...
    });     
    


Set node as assistant for tagged nodes. See Assistant for more details.

Code example:

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


Set node menu items for tagged nodes. See Node Menu Item for more details.

Code example:

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