Show / Hide Table of Contents

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
            },
          },
        ...
    });