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.

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.

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 Organogram;
  • 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

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

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);
Back to top