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, create your own types of shapes, 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:

Besides, you can create a new type of shapes for Diagram or Org Chart. For more information see the Configuring Diagram article.

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

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

or create an Org Chart

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 Diagram
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 Diagram
diagram.data.parse(flowShapeData);

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 - DHTMLX Diagram

Selecting Shapes

It is possible to activate selection of shapes in a diagram. You need to make 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 - DHTMLX Diagram

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 - DHTMLX Diagram

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 - (function) the function which returns the name(s) of CSS class(es) that should be applied to the shape.

Related sample:  Per-shape Toolbar - DHTMLX Diagram

Back to top