Lines

Overview

The look and feel of the lines which connect shapes is defined by the mode you initialize a diagram in: default, org chart, mindmap or PERT.

Lines in the default mode

In the default mode of Diagram, various shapes can be connected by "straight" (by default) or "elbow" lines in the necessary sequence to make up a scheme of a particular process.

To add a text for a line in the default mode of Diagram/Diagram Editor, use the text property of the lineTitle object.

Lines in the org chart mode

The org chart mode of Diagram represents an organizational chart that contains a set of shapes connected by "elbow" lines in a hierarchical order.

It is possible to define vertical direction of connecting shapes for the parent shape via the dir: "vertical" configuration attribute of the shape object.

Lines in the mindmap mode

The mindmap mode of Diagram is used to render one more kind of a hierarchical diagram. The shapes are connected by "curved" lines and arranged around a central shape.

The mode is useful when you need to represent a core topic or idea surrounded by the branches of the subtopics.

The arrangement of child shapes relative to the root shape is defined automatically by the main algorithm. To change the default direction of the child shapes, use the typeConfig configuration property on initialization of the diagram.

Links in the PERT mode

The PERT mode of Diagram is intended for rendering sequences of tasks and projects, and connections between them. The "task", "milestone" and "project" types of shapes are connected by the "links" connectors.

Setting connections between shapes

To connect shapes in Diagram, you can apply one of the following two ways:

• using line objects

You need to specify separate objects that will describe the logic of connecting shapes. For example:

const data = [
    // shapes
    { id: "1", text: "Chairman & CEO" },
    { id: "2", text: "Manager" },
    { id: "3", text: "Technical Director" },
    { id: "4", text: "Manager" },
    { id: "5", text: "Technical Director" },
    // connectors
    { "id": "1-2", "from": "1", "to": "2", "type": "dash" },
    { "id": "1-3", "from": "1", "to": "3", "type": "dash" },
    { "id": "1-4", "from": "1", "to": "4", "type": "line" },
    { "id": "1-5", "from": "1", "to": "5", "type": "line" }
];

The type property specified in the line object allows you to specify individual type for a separate line.

note

See the full list of configuration properties of a line object.

• using the "parent" attribute

note

This way does not work in the default mode of Diagram/Diagram Editor.

You can specify the parent property in the configuration object of the shape and set the id of its parent shape as the value:

const data = [
    // shapes
    { id: "1", text: "Chairman & CEO" },
    { id: "2", text: "Manager", parent: "1" },
    { id: "3", text: "Technical Director", parent: "1" },
    { id: "4", text: "Manager", parent: "1" },
    { id: "5", text: "Technical Director", parent: "1" }
];

In this case, all the connectors will have the same type.

Setting the default line type

You can set a common type for all the connector lines of the diagram via the lineType parameter of the lineConfig property of the diagram config object:

const diagram = new dhx.Diagram("diagram_container", {
    type: "default",
    lineConfig: {
        lineType: "dash" // "dash" | "line"
    }
});
diagram.data.parse(data);

The value of the lineType parameter is applied, if the line object doesn't contain the type property.

Setting the connection type of the line

You can specify the connection type for lines of the diagram via the connectType parameter of the lineConfig property of the diagram config object. It provides the following types:

• "elbow" (the default type for the default and org chart Diagram modes)
• "straight"
• "curved" (the default type for the mindmap Diagram mode). Note that the "curved" type of the connector line is used only in the mindmap Diagram mode

const diagram = new dhx.Diagram("diagram_container", {
    type: "default",
    lineConfig: {
        connectType: "straight" // "elbow" | "straight" for the default mode
    }
});
diagram.data.parse(data);

The value of the connectType parameter is applied, if the line object doesn't contain the connectType property.