Skip to main content

Diagram configuration

DHTMLX Diagram provides a wide range of options for configuration. You can zoom into and out a diagram, set the default type of shapes and lines, set margins between shapes, apply selection, and set a toolbar with icons for the shapes.

Setting the default shape type​

It is also possible to set the default type for all the shapes via the defaultShapeType attribute of the diagram config object:

const diagram = new dhx.Diagram("diagram_container", {
    type: "default", // or type: "org", or type: "mindmap" 
    defaultShapeType: "rectangle"
});
diagram.data.parse(data);

This value will be applied, if the configuration object of the shape doesn't contain the type property.

By default, the default types for all shapes are:

  • "rectangle" - for the diagram in the default mode;
  • "card" - for the diagram in the default or org chart mode;
  • "topic" - for the diagram in the mindmap mode.

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);

This value is applied, if the line object doesn't contain the type property.

Setting the default configuration of a shape​

There is a great possibility to escape operating with a big data set while preparing it for loading into the diagram. You can specify the default configuration for all shapes and lines of the necessary types and, therefore, reduce the amount of records in your code.

For this purpose, use the defaults property of the diagram configuration object:

The defaults object contains a number of key:value pairs where key is a type of a shape or line and value is the default config of the shape or line correspondingly.

note

The type and id attributes can not be defined in the default configuration of a shape/line.

Check the full list of configuration properties of a shape and line.

Arranging shapes in the mindmap mode of Diagram​

In the mindmap mode of Diagram, 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.

note

The typeConfig configuration property is not available in Diagram Editor.

The property allows you:

Setting direction for all child shapes​

To set the child shapes to the right/left of the root shape, use the direction attribute of the typeConfig property:

Setting direction for individual child shape​

You can set the mandatory direction for specific child shapes via the side attribute of the typeConfig property. The attribute is an object that contains a set of key:value pairs where key is the direction of the shapes (left, right) and value is an array with the ids of the shapes.

The other child shapes that are not set in the side option will be arranged automatically according to the main algorithm.

Positioning Diagram and shapes​

You can specify the position of a diagram on a page and set margins for shapes inside the margin attribute of the diagram configuration object:

Configuring autoplacement for shapes​

Starting from v3.0, the DHTMLX Diagram library lets you configure settings for automatically arranging connected shapes of Diagram in the hierarchical structure. You can specify the autoplacement property in the configuration object of Diagram and configure the mode of connecting shapes and distance between unconnected diagrams:

const diagram = new dhx.Diagram("diagram_container", {
    autoplacement: {
        mode: "edges",
        graphPadding: 100,
        placeMode: "radial"
    }
});
diagram.autoPlace();

The property can contain three options:

  • mode - (string) optional, the mode of connecting shapes, "direct" (by default) or "edges"
  • graphPadding - (number) optional, sets the distance between unconnected diagrams, "200" by default
  • placeMode - (string) sets the mode of placement of shapes, "orthogonal" (by default) or "radial"
note

The autoplacement will be applied only after the autoPlace() method is applied. The autoplacement does not work if you use groups or swimlanes.

Zooming Diagram​

If necessary, you can scale a diagram to fit your application. It can be done with the help of the scale option. By default, its value is set to 1. So, to zoom into a diagram, set the option to a value larger than 1 and to zoom out - smaller than 1, correspondingly.

Setting toolbar for items​

DHTMLX Diagram allows you to specify a toolbar with icons for Diagram items to simplify interaction with them. You can enable the toolbar via the toolbar option of the diagram configuration object:

Selecting items​

It is possible to activate selection of items in a diagram. You need to make use of the select attribute of the diagram config object.

Example in the org chart mode​

Example in the default mode​

note

The predefined set of events of the selection object can help you to define the way of processing the behavior of the diagram during selecting/unselecting items.