OrgChartJS Docs

Fields

There are two types of fields, node fields and link fields, you can define unlimeted number of fields. To do that you have to override the template.

Node text fields

In the following example we are going to demonstrate how to add four text fields. Define 4 fields in the template:

 
    OrgChart.templates.ana.field_0 = 
        '<text class="field_0" style="font-size: 20px;" fill="#ffffff" x="125" y="30" text-anchor="middle">{val}</text>';
    OrgChart.templates.ana.field_1 = 
        '<text class="field_1" style="font-size: 14px;" fill="#ffffff" x="125" y="50" text-anchor="middle">{val}</text>';
    OrgChart.templates.ana.field_2 = 
        '<text class="field_2" style="font-size: 14px;" fill="#ffffff" x="125" y="70" text-anchor="middle">{val}</text>';
    OrgChart.templates.ana.field_3 = 
        '<text class="field_3" style="font-size: 14px;" fill="#ffffff" x="125" y="90" text-anchor="middle">{val}</text>';
    

Then define the binding:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        nodeBinding: {
            field_0: "name",
            field_1: "title",
            field_2: "phone",
            field_3: "email"
        },    
        ...
    });
    

Here is the result:

Note that the email in the last node is missing, the fields are not mandatory in the JSON object.

Node image fields

In the following example we are going to demonstrate how to add two image fields. Define two fields in the template:

 
    OrgChart.templates.ana.img_0 = 
        '<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="20" y="-15" width="80" height="80"></image>';
    OrgChart.templates.ana.img_1 = 
        '<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="150" y="-15" width="80" height="80"></image>';

    

Then define the binding:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        nodeBinding: {
            field_0: "name",
            img_0: "photo1",
            img_1: "photo2",
        },    
        ...
    });
    

Here is the result:

Node SVG fields

The nodes are not limited to text and image fileds, you can define any svg element as field. In the following example we are going to demonstrate how to add webcall.me, linkedin and facebook icons with links. Define 3 fields in the template:

 
    OrgChart.templates.luba.webcallMe = '<g transform="matrix...';
    OrgChart.templates.luba.linkedIn = '<g transform="matrix...';
    OrgChart.templates.luba.facebook = '<g transform="matrix...';
    

Then define the binding:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        nodeBinding: {
            field_0: "name",
            webcallMe: "webcallMe",
            linkedIn: "linkedIn",
            facebook: "facebook"
        },      
        ...
    });
    

Here is the result:

Node HTML fields

In some cases you will need to add HTML tags inside the node.

In the following example we are going to demonstrate how to add HTML tags into the html. Define new field in the template:

 
    OrgChart.templates.ana.html = 
        '<foreignobject class="node" x="20" y="10" width="200" height="100">{val}</foreignobject>';

    

Then define the binding:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        nodeBinding: {
            field_0: "name",
                html: "html"
        },
        ...
    });
    

Here is the result:

Link text field

Adding clickable link with that will open another page. Here is an example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        nodeBinding: {
            field_0: function (sender, node) {
                var data = sender.get(node.id);
                var name = data["name"];
                var link = data["link"];
                return '<a target="_blank" href="' + link + '">' + name + '</a>'
            }
        },
        ...
    });
    

Labels

Also you can add link labels. Here is an example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        linkBinding: {
            link_field_0: "createdAt"
        },    
        ...
    });