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 in the chart definition:
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 node binding in the configuration:
nodeBinding: { field_0: "name", img_0: "photo1", img_1: "photo2", }
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.olivia.webcallMe = '<g transform="matrix...'; OrgChart.templates.olivia.linkedIn = '<g transform="matrix...'; OrgChart.templates.olivia.facebook = '<g transform="matrix...';
Then define the binding:
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="10" y="10" width="200" height="100">{val}</foreignobject>`;
Add the field in nodeBinding:
html: "html"Data example:
{ id: "1", html: "<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id pellentesque lacus.</div>" },
Here is the result:
Another example could be if spefic css property is not supported in SVG, the demo below demostrates how to flip nodes with perspective css property:
Hyperlink text field
You can use onField event to change a node field value. For example you can add a clickable link that will open another page. Here is the example:
chart.onField((args) => { if (args.name == 'name') { var name = args.data["name"]; var link = args.data["link"]; args.value = '<a target="_blank" href="' + link + '">' + name + '</a>'; } });You should load the data after the event listener:
chart.load([ { id: 1, name: "BALKAN App", link: "https://balkan.app" }, ])
Labels
Also you can add link labels. Here is an example:
linkBinding: { link_field_0: "createdAt" },