Category / Section
How to create simple and customizable organization chart in diagram
5 mins read
In this diagram control, you can create an organizational chart layout by setting the layout type to OrganizationalChart. This layout shows the relationship between the employees in the Management.
Input JSON for the organizational chart
You need to pass the JSON data as an input that should contain the employee information. In the sample, we have employee details such as Id, Name, Designation, Image and the Parent (Reporting Person).
Here is a code example of Input JSON
var data = [
{
'Id': 'parent', 'Name': 'Maria Anders', 'Designation': 'Managing Director',
'ImageUrl': 'https://ej2.syncfusion.com/demos/src/diagram/employees/image22.png', 'IsExpand': 'true', 'RatingColor': '#C34444'
},
{
'Id': 1, 'Name': 'Ana Trujillo', 'Designation': 'Project Manager',
'ImageUrl': 'https://ej2.syncfusion.com/demos/src/diagram/employees/image12.png', 'IsExpand': 'false',
'RatingColor': '#68C2DE', 'ReportingPerson': 'parent'
},
{
'Id': 2, 'Name': 'Anto Moreno', 'Designation': 'S/w Engg',
'ImageUrl': 'https://ej2.syncfusion.com/demos/src/diagram/employees/image11.png', 'IsExpand': 'false',
'RatingColor': '#93B85A', 'ReportingPerson': 1
},
{
'Id': 3, 'Name': 'Thomas Hardy', 'Designation': 'Project Manager',
'ImageUrl': 'https://ej2.syncfusion.com/demos/src/diagram/employees/image21.png', 'IsExpand': 'false',
'RatingColor': '#68C2DE', 'ReportingPerson': 'parent'
},
{
'Id': 4, 'Name': 'Christina kaff', 'Designation': 'S/w Engg',
'ImageUrl': 'https://ej2.syncfusion.com/demos/src/diagram/employees/image13.png', 'IsExpand': 'false',
'RatingColor': '#93B85A', 'ReportingPerson': 1
},
{
'Id': 5, 'Name': 'Hanna Moos', 'Designation': 'S/w Engg',
'ImageUrl': 'https://ej2.syncfusion.com/demos/src/diagram/employees/image1.png', 'IsExpand': 'true',
'RatingColor': '#D46E89', 'ReportingPerson': 3
},
{
'Id': 6, 'Name': 'Peter Citeaux', 'Designation': 'S/w Engg',
'ImageUrl': 'https://ej2.syncfusion.com/demos/src/diagram/employees/image2.png', 'IsExpand': 'true',
'RatingColor': '#68C2DE', 'ReportingPerson': 3
},
];
Creating the relationship between the employees
You should set the layout type to OrganizationalChart and set the dataSourceSettings id and parentId property to establish a relationship between the employees. Please refer to the following code example.
diagram = new ej.diagrams.Diagram({
width: '1000px', height: '500px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },
//set an layout details
layout: {
type: 'OrganizationalChart', margin: { top: 20 },
getLayoutInfo: function (node, tree) {
if (!tree.hasSubTree) {
tree.orientation = 'Horizontal';
tree.type = 'Center';
}
}
},
dataSourceSettings: {
//set an JSON, id and parentId
id: 'Id', parentId: 'ReportingPerson', dataManager: new ej.data.DataManager(data)
},
});
diagram.appendTo('#diagram');
Customizing the organizational chart
You can customize the organizational chart by rendering the image and the text in a node using the stack panel. Please refer to the following link to know more about the stack panel.
https://ej2.syncfusion.com/documentation/diagram/group/#container
Here is a code example to render the image and the text in a node using the stack panel.
diagram = new ej.diagrams.Diagram({
//Triggers at each initialization of Node
setNodeTemplate: setNodeTemplate,
});
//Triggers at each initialization of Node
function setNodeTemplate(obj) {
//create a stack panel
var content = new ej.diagrams.StackPanel();
content.id = obj.id + '_outerstack';
content.orientation = 'Horizontal';
content.style.strokeColor = 'gray';
content.padding = { left: 5, right: 10, top: 5, bottom: 5 };
//create a image element
var image = new ej.diagrams.ImageElement();
image.width = 50;
image.height = 50;
image.style.strokeColor = 'none';
image.source = obj.data.ImageUrl;
image.id = obj.id + '_pic';
//create a stack panel
var innerStack = new ej.diagrams.StackPanel();
innerStack.style.strokeColor = 'none';
innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 };
innerStack.id = obj.id + '_innerstack';
var text = new ej.diagrams.TextElement();
text.content = obj.data.Name;
text.style.color = 'black';
text.style.bold = true;
text.style.strokeColor = 'none';
text.horizontalAlignment = 'Left';
text.style.fill = 'none';
text.id = obj.id + '_text1';
//create a text element
var desigText = new ej.diagrams.TextElement();
desigText.margin = { left: 0, right: 0, top: 5, bottom: 0 };
desigText.content = obj.data.Designation;
desigText.style.color = 'black';
desigText.style.strokeColor = 'none';
desigText.style.fontSize = 12;
desigText.style.fill = 'none';
desigText.horizontalAlignment = 'Left';
desigText.style.textWrapping = 'Wrap';
desigText.id = obj.id + '_desig';
//append a text to the stack children property
innerStack.children = [text, desigText];
//append a image and innerstack to the stack children property
content.children = [image, innerStack];
return content;
}
Please find the complete code example of an organizational layout as follows.
Index.html
<div>
<div id="diagram" style="width:500px;height:550px;float:right;"></div>
</div>
Index.js
ej.base.enableRipple(true);
var diagram;
var data = [
{
'Id': 'parent', 'Name': 'Maria Anders', 'Designation': 'Managing Director',
'ImageUrl': 'https://ej2.syncfusion.com/demos/src/diagram/employees/image22.png', 'IsExpand': 'true', 'RatingColor': '#C34444'
},
{
'Id': 1, 'Name': 'Ana Trujillo', 'Designation': 'Project Manager',
'ImageUrl': 'https://ej2.syncfusion.com/demos/src/diagram/employees/image12.png', 'IsExpand': 'false',
'RatingColor': '#68C2DE', 'ReportingPerson': 'parent'
},
{
'Id': 2, 'Name': 'Anto Moreno', 'Designation': 'S/w Engg',
'ImageUrl': 'https://ej2.syncfusion.com/demos/src/diagram/employees/image11.png', 'IsExpand': 'false',
'RatingColor': '#93B85A', 'ReportingPerson': 1
},
{
'Id': 3, 'Name': 'Thomas Hardy', 'Designation': 'Project Manager',
'ImageUrl': 'https://ej2.syncfusion.com/demos/src/diagram/employees/image21.png', 'IsExpand': 'false',
'RatingColor': '#68C2DE', 'ReportingPerson': 'parent'
},
{
'Id': 4, 'Name': 'Christina kaff', 'Designation': 'S/w Engg',
'ImageUrl': 'https://ej2.syncfusion.com/demos/src/diagram/employees/image13.png', 'IsExpand': 'false',
'RatingColor': '#93B85A', 'ReportingPerson': 1
},
{
'Id': 5, 'Name': 'Hanna Moos', 'Designation': 'S/w Engg',
'ImageUrl': 'https://ej2.syncfusion.com/demos/src/diagram/employees/image1.png', 'IsExpand': 'true',
'RatingColor': '#D46E89', 'ReportingPerson': 3
},
{
'Id': 6, 'Name': 'Peter Citeaux', 'Designation': 'S/w Engg',
'ImageUrl': 'https://ej2.syncfusion.com/demos/src/diagram/employees/image2.png', 'IsExpand': 'true',
'RatingColor': '#68C2DE', 'ReportingPerson': 3
},
];
function getNodeDefaults(obj) {
obj.height = 50;
obj.style = { fill: 'transparent', strokeWidth: 2 };
obj.expandIcon = { shape: 'Minus', height: 10, width: 10 };
obj.collapseIcon = { shape: 'Plus', height: 10, width: 10 };
return obj;
}
function getConnectorDefaults(connector) {
connector.targetDecorator.shape = 'None';
connector.type = 'Orthogonal';
connector.style.strokeColor = 'gray';
connector.cornerRadius = 20;
return connector;
}
//Triggers at each initialization of Node
function setNodeTemplate(obj) {
//create a stack panel
var content = new ej.diagrams.StackPanel();
content.id = obj.id + '_outerstack';
content.orientation = 'Horizontal';
content.style.strokeColor = 'gray';
content.padding = { left: 5, right: 10, top: 5, bottom: 5 };
//create an image element
var image = new ej.diagrams.ImageElement();
image.width = 50;
image.height = 50;
image.style.strokeColor = 'none';
image.source = obj.data.ImageUrl;
image.id = obj.id + '_pic';
//create a stack panel
var innerStack = new ej.diagrams.StackPanel();
innerStack.style.strokeColor = 'none';
innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 };
innerStack.id = obj.id + '_innerstack';
var text = new ej.diagrams.TextElement();
text.content = obj.data.Name;
text.style.color = 'black';
text.style.bold = true;
text.style.strokeColor = 'none';
text.horizontalAlignment = 'Left';
text.style.fill = 'none';
text.id = obj.id + '_text1';
//create a text element
var desigText = new ej.diagrams.TextElement();
desigText.margin = { left: 0, right: 0, top: 5, bottom: 0 };
desigText.content = obj.data.Designation;
desigText.style.color = 'black';
desigText.style.strokeColor = 'none';
desigText.style.fontSize = 12;
desigText.style.fill = 'none';
desigText.horizontalAlignment = 'Left';
desigText.style.textWrapping = 'Wrap';
desigText.id = obj.id + '_desig';
//append a text to the stack children property
innerStack.children = [text, desigText];
//append an image and innerstack to the stack children property
content.children = [image, innerStack];
return content;
}
diagram = new ej.diagrams.Diagram({
width: '1000px', height: '500px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },
//set an layout details
layout: {
type: 'OrganizationalChart', margin: { top: 20 },
getLayoutInfo: function (node, tree) {
if (!tree.hasSubTree) {
tree.orientation = 'Horizontal';
tree.type = 'Center';
}
}
},
dataSourceSettings: {
//set an JSON, id and parentId
id: 'Id', parentId: 'ReportingPerson', dataManager: new ej.data.DataManager(data)
},
getNodeDefaults: getNodeDefaults,
getConnectorDefaults: getConnectorDefaults,
setNodeTemplate: setNodeTemplate,
tool: ej.diagrams.DiagramTools.ZoomPan,
});
diagram.appendTo('#diagram');
Please find the sample here for your reference.
Sample:
https://stackblitz.com/edit/5myckm-wrumb5?file=index.html
Conclusion
I hope you enjoyed learning about how to create simple and customizable organization chart in diagram.
You can refer to our JavaScript Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Diagram example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
