Configuring Diagram

dhtmlxDiagram provides a wide range of options for configuration. You can zoom into and out from a diagram, change the type of shapes and their margins, apply selection, define the size of grid cells and set a toolbar with icons for the shapes.

Check the list of possible config properties.

Setting Type of Shape

See the full lists of shapes types for the diagram and for the org chart type:

Setting the default shape type

You can set the default type for all the shapes via the defaultShapeType attribute of the diagram config object:

var diagram = new dhx.Diagram("diagram_container", { 
    defaultShapeType: "rectangle"       });
diagram.data.parse(data);

Setting personal type for a shape

It is also possible to specify individual types for separate shapes via the related type attribute of the data item object.

// data to load
var data = [
    // shapes
    { "id": "1", "x": 100, "y": 40,  "text": "Start", "type": "start", "height": 50 },
    { "id": "2", "x": 100, "y": 170, "text": "Operation 1", "type": "output" },
    { "id": "3", "x": 100, "y": 300, "text": "Operation 2", "type": "input" },
 
    // connectors
    { "from": "1", "to": "2" },
    { "from": "2", "to": "3" }
]
 
// initializing a diagram
var diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

Setting Type of Connector

See the full lists of shapes types for the diagram and for the org chart type:

Setting the default connector type

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

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

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

Setting the 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 Diagram and Org Chart:

// data to load
var data = [
   // connectors
   { "from": "1", "to": "2", "type": "line", "forwardArrow": "filled" },
   { "from": "2", "to": "3", "type": "dash", "toSide": "bottom", 
        "forwardArrow": "filled" },
   { "from": "2", "to": "4", "type": "dash", "toSide": "top", 
        "forwardArrow": "filled" }
]
 
// initializing a diagram
var diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

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.

For example:

// zooming an org chart
var diagram = new dhx.Diagram("diagram_container", { type: "org", scale:0.7});
diagram.data.parse(data);

Related sample:  Slim Org Chart

Selecting Shapes

It is possible to activate selection of shapes in a diagram. You need to makes use of the select attribute of the diagram config object:

// enabling selection in an org chart 
var diagram = new dhx.Diagram("diagram_container", { 
    type: "org", 
    select: true        });

Related sample:  Org Chart Item Selection

You can also define the way of processing the behavior of the diagram during selecting/unselecting of shapes via the predefined set of events:

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 config object.

The margin object contains a set of properties:

  • itemX - horizontal space between two shapes
  • itemY - vertical space between two shapes
  • x - horizontal space between the start of a diagram and the first item
  • y - vertical space between the start of a diagram and the first item
// setting margins for an org chart
var diagram = new dhx.Diagram("diagram_container", { type: "org",
    margin:{
      x:20, 
      y:20,
      itemX:50,
      itemY:50
    }
})

Related sample:  Org Chart Margin Between Shapes

Setting Size of Grid Cell

You can specify the size of the grid cell in pixels via the gridStep configuration option. This parameter defines the step of moving a shape and equals to 10 pixels by default.

var diagram = new dhx.Diagram("diagram_container", { 
    gridStep:20
});

Setting Toolbar for Shapes

dhtmlxDiagram allows you to specify a toolbar with icons for Diagram shapes to simplify interaction with shapes. You can enable the toolbar via the toolbar option of the diagram config object:

// setting toolbar for shapes of an org chart
var diagram = new dhx.Diagram("diagram_container", { type:"org", select:true,
    toolbar:[{
        id:"download",
        content:"<i class='zmdi zmdi-download'></i>"
    },
    {
        id:"info",
        content:"<i class='zmdi zmdi-info-outline'></i>"
    }]
});

The toolbar is set as an array of icons objects. Each icon object can have the following properties:

  • id - (string) the id of the icon.
  • content - (string) the content of the icon. It can contain an HTML element with the name of the icon class.
  • check - (function) checks whether the icon should be applied to the shape. The function takes a shape object and returns true, if the icon will be rendered for this shape.
  • css - (string) the name of the CSS class that should be applied to the shape.

Related sample:  Per-shape Toolbar

Back to top