Org Chart Shapes and Connectors

The Org Chart has specific types of shapes. You will find them together with the connectors types available for the Org Chart in this article. The article also covers such issues as creating a new type of shapes and adding the Diagram shapes into Org Chart.

Shapes Configuration

There are three types of shapes typical of the Org Chart:

  • "card" - the default type for an org chart

  • "img-card" - for adding shapes with images. Don't forget to provide images for cards via the img attribute of the shape object.

  • "svg-card" - a special type for rendering shapes in Internet Explorer. See details below.

Besides, you can create a new type of shapes for Org Chart. But it doesn't work for Org Chart Editor. For more information see the Org Chart Shapes and Connectors article.

The purpose of the "svg-card" type

A diagram works with the SVG format, while inserted text and images present HTML content. Internet Explorer doesn't support using HTML content inside SVG tags.

The "svg-card" type allows replacing HTML content with SVG tags for correct rendering in IE. Thus, images won't be rendered and only a text and a title will be shown in a shape.

Note that there can be problems with rendering long texts in shapes of this type.

Properties of a shape object

The shapes of Org Chart are configured automatically. You can set the following options for a shape of an org chart:

  • id - (string|number) the unique id of a shape;
  • text - (string) the text to be rendered in a shape;
  • parent - (string|number) the id of the parent shape;
  • type - (string) the type of the shape. See the list of shapes types for Org Chart;
  • img - (string) the image of a shape;
  • dx - (number) the left offset of the shape;
  • dy - (number) the top offset of the shape;
  • title - (string) the title of a shape;
  • height - (number) the height of a shape;
  • width - (number) the width of a shape;
  • dir - (string) the direction of shapes connecting. To connect shapes vertically, set the attribute to the "vertical" value. It allows making nested lists in an Org Chart;
  • open - (boolean) defines, whether the child items of the current shape will be shown. True by default;
  • color - (string) the color of the header of the shape, any CSS legal color value;
  • css - (string) the name of the CSS class that should be applied to the shape.
var data = [
    // shapes
    {
        "id": "1",
        "text": "Chairman & CEO",
        "title": "Henry Bennett",
        "img": "../common/img/avatar-1.png"
    },
    {
        "id": "2",
        "text": "QA Lead",
        "title": "Emma Lynch",
        "img": "../common/img/avatar-2.png",
        "parent": "1",
        "dir": "vertical"
    },
    {
        "id": "2.1",
        "text": "QA",
        "title": "Charles Little",
        "img": "../common/img/avatar-4.png",
        "parent": "2"
    }
]

Setting the default shape type

You can set a common type for all the shapes of the Org Chart via the defaultShapeType property of the diagram config object:

var diagram = new dhx.Diagram("diagram_container", { 
    type: "org", 
    defaultShapeType: "img-card"        });

This value is applied, if the shape config doesn't contain the "type" property.

Related sample:  Org Chart with images - DHTMLX Diagram

Setting type for a separate shape

Use the name of the necessary type as a value of the type attribute inside the shape object, while preparing a data set for loading into the org chart. In the following example all the shapes have the default "card" type, except for the item with the id "1", which has the "img-card" type:

// data to load
var data = [
    {
        "id": "1",
        "text": "Chairman & CEO",
        "title": "Henry Bennett",
        "type":"img-card",                               "img": "../common/img/avatar-1.png"                },
    {
        "id": "2",
        "text": "Manager",
        "title": "Mildred Kim",
    },
    {
        "id": "3",
        "text": "Technical Director",
        "title": "Jerry Wagner",
    }
    // more shape objects
]
 
// initializing an org chart
var diagram = new dhx.Diagram("diagram_container", { type: "org" });
diagram.data.parse(data);

Using Nested Lists in Org Chart

There is a possibility to add nested lists into Org Chart. To form a nested list, you need to define vertical direction of connecting shapes for the parent shape via the attribute dir:"vertical". All the children of this parent will be connected vertically, including the nested ones:

Below you will find a fragment of the code that will help you to get the idea:

var nestedLists = [
    { "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}
];
 
var diagram = new dhx.Diagram("diagram_container", { type: "org" });
diagram.parse(nestedLists);

Related sample:  Org Chart with Nested Vertical Lists - DHTMLX Diagram

Templates for Shapes

There is a possibility to create your own type of shapes with the help of SVG or HTML templates.

Using HTML templates in Internet Explorer is not available. In this case you have to create SVG templates only.

Related sample:  HTML Template - DHTMLX Diagram

Related sample:  SVG Template - DHTMLX Diagram

To create a new type of a shape you need to create a new template and set it for a shape using the type attribute in the configuration object of the shape.

To do this, you need to take the following steps:

  • initialize dhtmlxDiagram
var diagram = new dhx.Diagram("diagram", {type:"org"});
  • create a new template (customShape, for example), which must be assigned to a new key of the flowShapes diagram object. Set as a value of diagram.flowShapes.customShape a function that takes one parameter:

    • config - (object) an object with configuration of a shape

Do not use default types names of the dhtmlxDiagram library as names for your own templates.

// creating SVG template
diagram.flowShapes.customShape = function(config) {     var svg = '<svg width="'+ config.width +'" height="'+ config.height +
                            '" viewBox="0 0 '+ config.width +' '+ config.height +
                            '" fill="none" xmlns="http://www.w3.org/2000/svg">';
        svg += '<rect width="'+ config.width +'" height="'+ config.height +
                            '" fill="'+ config.fill +'"/>';
        svg += '</svg>';
    return svg;
};

The function will return SVG template.

or

// creating HTML template
diagram.flowShapes.customShape = function(config) {
    return `
        <section style="width:${config.width}px; 
            height:${config.height}px; background: ${config.fill}">
        <span style="font-size:${config.fontSize}px; 
            color:${config.fontColor}">${config.text}</span>
        </section>
    `
};

The function will return HTML template.

  • set the new template for a shape via the type attribute of the configuration object of the shape while preparing a data set for loading into Org Chart
var flowShapeData = [
    {
        "id": "shape",
        "type": "customShape",         "text": { 
            title: { text: "Shape", "fontSize": 16, width: 45, 
                        lineHeight: 18, paddingTop: 12 },
            firstLine: "draw ()",
            secondLine: "resize ()",
            thridLine: "rotate ()"
        },
        "x": 200,
        "y": 0,
        "fill": "#ceefe1",
        "stroke": "#B8C6D6",
        "extraLinesStroke": "#0AB169",
        "width": 140,
        "height": 140,
        "strokeWidth": 2,
        "fontColor": "#4D4D4D",
        "fontSize": 14,
        "textAlign": "center",
        "lineHeight": 20,
        "fontStyle": "normal",
        "textVerticalAlign": "center",
        "angle": 0,
        "strokeType": "line"
    },
    {
        "id": "triangle",
        "type": "customShape",         "text": { 
            title: { text: "Triangle", "fontSize": 16, width: 57, paddingTop: 12 },
            firstLine: "draw ()"
        },
        "x": 200,
        "y": 220,
        "fill": "#ceefe1",
        "stroke": "#B8C6D6",
        "extraLinesStroke": "#0AB169",
        "width": 140,
        "height": 90,
        "strokeWidth": 2,
        "fontColor": "#4D4D4D",
        "fontSize": 14,
        "textAlign": "center",
        "lineHeight": 18,
        "fontStyle": "normal",
        "textVerticalAlign": "center",
        "angle": 0,
        "strokeType": "line"
    },
    {
        "id": "rectangle",
        "type": "customShape",         "text": {
            title: { text: "Rectangle", "fontSize": 16, width: 70, 
                        lineHeight: 18, paddingTop: 12 },
            firstLine: "draw ()",
            secondLine: "get/set width",
            thridLine: "get/set height"
        },
        "x": 400,
        "y": 220,
        "fill": "#ceefe1",
        "stroke": "#B8C6D6",
        "extraLinesStroke": "#0AB169",
        "width": 140,
        "height": 156,
        "strokeWidth": 2,
        "fontColor": "#4D4D4D",
        "fontSize": 14,
        "textAlign": "center",
        "lineHeight": 20,
        "fontStyle": "normal",
        "textVerticalAlign": "center",
        "angle": 0,
        "strokeType": "line"
    }
];

You can specify the text attribute as an object while creating a shape with a custom type.

  • load the prepared data set into Org Chart
diagram.data.parse(flowShapeData);

Connectors Configuration

The look and the order of connecting shapes is defined by the configuration of the connector objects. You can:

  • specify the starting and ending shapes;
  • set the type of the connector line.



var data = [
    // connectors
    { "id": "1-2", "from": "1", "to": "2", "type": "line" },
    { "id": "1-3", "from": "1", "to": "3", "type": "dash" }
]

A connector object can have the following properties:

  • id - the unique id of the connector;
  • from - the id of the parent shape;
  • to - the id of the child shape;
  • type - the type of the connector:"line" (default) or "dash".

Setting the default connector type

You can set a common type for all the connectors of the Org Chart via the defaultLinkType property of the diagram config object:

var diagram = new dhx.Diagram("diagram_container", { 
    type: "org", 
    defaultLinkType:"line"        });

This value is applied, if the connector config doesn't contain the "type" property.

Setting type for a separate connector

Use the name of the necessary type as a value of the type attribute inside the connector object, while preparing a data set for loading into the org chart.

// data to load
var data = [
    // shapes
    { "id": "1", "text": "Chairman & CEO"},
    { "id": "2", "text": "Manager"},
    { "id": "3", "text": "Technical Director"},
 
    // connectors
    { "id": "1-2", "from": "1", "to": "2"},
    { "id": "1-3", "from": "1", "to": "3", "type": "dash" } ]
 
// initializing an org chart
var diagram = new dhx.Diagram("diagram_container", { type: "org" });
diagram.data.parse(data);

Creating mixed Org Chart

Starting from v2.2, it is possible to create Org Chart mixed with Diagram.

Related sample:  Org Chart Mixed - DHTMLX Diagram

To add the Diagram shapes to Org Chart you have to follow the rules described below:

  • specify the type:"org" property in the diagram configuration object
  • specify types for shapes of Org Chart either by setting a common type for all the shapes of the Org Chart via the defaultShapeType property of the diagram config object or by setting a type for a separate shape of Org Chart
  • specify types for shapes of Diagram via the related type attribute in the config of the shape
// data to load
var data = [
    // the Org Chart shape
    {
        id: "1",
        text: "Chairman & CEO",
        title: "Henry Bennett",
        img: "../common/img/avatar-1.png",
    },
 
    // the Diagram shapes
    {
        id: "2",
        text: "Manager",
        type: "database",         parent: "1"     },
    {
        id: "3",
        text: "Technical Director",
        type: "process",         parent: "1"     },
    {
        id: "2.1",
        text: "Marketer",
        type: "database",         parent: "2"     },
    {
        id: "3.1",
        text: "Team Lead",
        type: "process",         parent: "3"     }
];
 
// initializing an org chart
var diagram = new dhx.Diagram("diagram", {
    type: "org", 
    defaultShapeType: "img-card" 
});
diagram.data.parse(data);

Behavior of the Diagram shapes will be the same as behavior of the Org Chart shapes.

It is also possible to create mixed Diagram. See the Creating mixed Diagram article.

Back to top