Introduction
Organizational charts allow representing the hierarchical structure of an organization in easy to understand way. They’re not supposed to be fancy, but it’s always important to have the possibility to change the appearance of an organizational chart the way you want. In this article, we’ll take a look at how you can create custom styles for hierarchical diagrams made with the JavaScript diagram library made by DHTMLX team.
Initialize a Diagram on the Page
You should download dhtmlxDiagram library and add one js and one css file on the page:
<script src="codebase/diagram.js"></script>
<link href="codebase/diagram.css" rel="stylesheet">
Now, you can create a new DIV container that will hold the org chart diagram and initialize it:
<body>
<div id="my_diagram"></div>
<script type="text/javascript">
var myDiagram = new dhx.Diagram("my_diagram", {type: "org"});
</script>
</body>
The construction takes the ID of th DIV container as a parameter. The type property is a mandatory attribute that allows choosing what type of the diagram you’re going to create. Besides that, there’s a set of optional properties that allow configuring the diagram.
Now you can initialize the diagram with data. To create a new dataset, you can use inline JSON object:
var my_dataset = [
{
id: "1",
text: "Chairman & CEO",
title: "Henry Bennett"
},
{
id: "2",
text: "Manager",
title: "Mildred Kim"
},
{
id: "3",
text: "Technical Director",
title: "Jerry Wagner"
},
{ id: "1-2", from: "1", to: "2", type: "line" },
{ id: "1-3", from: "1", to: "3", type: "line" }
];
As you can see, our diagram will contain three nodes. We’ve defined IDs, the text, and title for each node. Besides that, we’ve defined the connections between the nodes.
After you create the data, you can use the parse method to load it into the diagram:
myDiagram.parse(my_dataset);
If you open the page in your browser, you’ll see the default organizational diagram:
Now, let's take a look at how we can change the appearance of this diagram.
Changing the Appearance of Your Org Chart
Changind the Scale
If you want to create a mobile app that works with organograms, the possibility to change the scale of the diagram will be useful. For this task, you can change the value of the scale property. The default value is 1. You can set the property to value larger than 1 to zoom in. To zoom out, use value smaller than 1.
Here's how it works:
var myDiagram = new dhx.Diagram("my_diagram", {
type: "org",
scale: 0.75
});
The result is shown below:
Changing Type of Shape
By default, the dhtmlxDiagram library uses the card shape type for its nodes. Besides that, you can use two additional types: img-card that allows adding shapes with images, and svg-card that allows rendering shapes in Internet Explorer. Let’s see how the img-card type works.
You can use the defaultShapeType attribute to set the default type for all the shapes of the diagram:
var myDiagram = new dhx.Diagram("my_diagram", {
type: "org",
scale: 0.75,
defaultShapeType: "img-card"
});
Another option is to define an individual type for a particular node of the diagram using the type attribute of the data item object. Here's an example:
var my_dataset = [
{
id: "1",
text: "Chairman & CEO",
title: "Henry Bennett",
type: "img-card",
img:"./path/to/file.png"
},
];
If you open the diagram in your browser, you’ll see that the corresponding node now contains an image:
Changing the Positioning of Nodes
It's possible to change the position of a diagram and define margins for the nodes of the diagram. To do so, you can use the margin attribute. It contains the following properties:
-
itemX defines horizontal space between two shapes
-
itemY defines vertical space between two shapes
-
x defines horizontal space between the diagram container and the first node
-
y defines vertical space between the diagram container and the first node
Here’s how you can set the required values:
var myDiagram = new dhx.Diagram("my_diagram", {
type: "org",
margin:{
x:30,
y:30,
itemX:80,
itemY:80
}
});
Using this code, you’ll get the following result:
Using CSS to Change the Style
There are two classes that allow changing the style of your diagram. .dhx_item_shape allows changing the style of the shape. Changing the .shape_content CSS class, you can modify the content of the shape.
Besides that, you can change the appearance of the connectors between the nodes. You can define a custom CSS class and use it the configuration object. Let’s consider a small example. Here’s some CSS code:
.myStyle .shape_content {
background: #9575CB;
color: #FFF;
}
.myStyle:hover .shape_content {
background: #00B7FE;
}
.myConnector {
stroke: red;
stroke-dasharray: 10;
}
Now, you can create a dataset and define a custom style for a particular shape or connector. There are four attributes that allow changing the appearance and size of an element of the diagram:
-
css allows setting the name of the CSS class that will be applied to the shape
-
color defines the color of the shape’s header
-
height allows adjusting the height of the shape
-
width allows changing the width of the shape
Here's how you can use these attributes:
var my_dataset = [
{
id: "1",
text: "Chairman & CEO",
color: "#673AB7",
css: "myStyle",
},
{
id: "2",
text: "Manager",
color: "#E91E63"
},
{
id: "3",
text: "Technical Director",
color: "#9C27B0",
width: 200
},
{
id: "1-2",
from: "1",
to: "2",
css: "myConnector",
type: "line"
},
{
id: "1-3",
from: "1",
to: "3",
type: "line"
}
]
Here's the result:
Using Nested Nodes
The attribute dir:"vertical" allows creating good-looking and neat nested lists. If you apply this attribute to a particular shape, all its children will be connected vertically, including the nested ones. When you create a dataset, you can use the parent attribute that defines the parent for this particular shape. For example:
var my_dataset = [
{
"id": 1,
"text": "item: 1",
},
{
"id": 2,
"text": "item: 2",
"parent": 1,
"dir": "vertical"
},
{
"id": 3,
"text": "item: 3",
"parent": 14
},
{
"id": 7,
"text": "item: 7",
"parent": 14
},
{
"id": 14,
"text": "item: 14",
"parent": 2
},
{
"id": 19,
"text": "item: 19",
"parent": 2
}
];
As a result, you’ll get a nested graph that is shown in the screenshot above:
Using Editor Mode for Organization Chart
Besides the described possibilities, there’s another option that allows creating a unique style for your organizational chart. The Editor Mode provides the possibility of drag-and-drop chart editing with no need to mess with any code. You can adjust all the described changes by dragging shapes, selecting required color via colorpicker, and defining the positioning and size values via the sidebar editor.
Instead of Conclusion
I hope that this small guide will be quite helpful for those developers who are looking for fast and nice-looking JavaScript org chart for their app. DHTMLX team had an aim to create easy but highly-customizable component and here it is. Note that if you're looking for a complete open-source solution, this library won't suit you, but you can find some worthy projects on GitHub.
Happy coding!
