Skip to main content

Customizing items

You can easily modify the appearance of diagram items by using various configuration properties inside their objects.

Besides, you can change the look and feel of the diagram according to your needs by creating custom shapes of the desired appearance.

Styling shapes and lines via the configuration properties

Styling shapes

A shape object provides a wide range of properties that you can use to modify the look and feel of shapes.

A good way to style all the shapes of the same type at once is to specify the styling settings for the shapes via the defaults property of the diagram:

const defaults = {
start: {
fill: "#FE9998",
stroke: "#FE9998",
fontColor: "#FFF",
lineHeight: 16
},
end: {
fill: "#FE9998",
stroke: "#FE9998",
fontColor: "#FFF",
lineHeight: 16
},
...
};

See the full list of shape object properties.

Styling lines

To change the look of connector lines, use the necessary configuration properties inside the line object.

const data = [
{
id: "1-2",
from: "1",
to: "2",
type: "line",
strokeType: "dash",
stroke: "red",
},
];

See the full list of line object properties.

Check the example:

Defining the shape's template

You can create a customized diagram by adding new types of shapes into the diagram and defining templates for them. For this purpose, use the addShape() method of the diagram object.

Example in the default mode

Example in the org chart mode

Example in the mindmap mode

Styling target shapes

In Diagram Editor in org and mindmap charts, you can add custom style for target items. The stylization doesn't work with the parent item of the moved item and with the moved item with the property giveItem: false.

<style>
.dhx_diagram_item.dhx_action__target--take {
// styles for target item which can catch another item
}
.dhx_diagram_item.dhx_action__target--doesnt_take {
// styles for target item which can not catch another item
}
</style>

Styling groups via the configuration properties

Styling the group

To specify a custom style for a group, you can use the style property of the group object. For example:

Styling the group header

You can change the default style of the group header via the attributes of the header property of the group object.

Styling swimlanes via the configuration properties

Styling the swimlane

You can customize the strokeWidth, stroke, and fill settings of a swimlane via the style property of the swimlane object:

const data = [
{
"type": "$swimlane",
"width": 970,
"height": 790,
"header": {
"text": "Game levels and locations",
"closable": true
},
"layout": [
["1"],
["2"],
["3"],
["4"],
["5"]
],
"style": {
"strokeWidth": 5,
"stroke": "#083796",
"fill": "#D4DAE4"
}
},
];

Styling the swimlane headers/sub-headers

The header, subHeaderRows, and subHeaderCols properties of a swimlane object include sets of additional attributes for customizing the header and subheaders of the swimlane.

For example, you can change the background colors of the top subheaders of the swimlane via the subHeaderCols property:

const data = [
{
"id": "main",
"type": "$swimlane",
"height": 730,
"width": 1195,
"header": {
"closable": true,
"text": "Waterfall diagram template"
},
"layout": [
[1, 2, 3, 4]
],
"subHeaderCols": {
"headers": [
{
"text": "September",
"fill": "rgba(243, 92, 79, 0.4)"
},
{
"text": "October",
"fill": "rgba(155, 96, 248, 0.4)"
},
{
"text": "November",
"fill": "rgba(255, 174, 18, 0.4)"
},
{
"text": "December",
"fill": "rgba(60, 201, 122, 0.4)"
}
]
}
}
];

Check the full example:

Styling swimlane cells

If you need to customize a separate cell of the swimlane, use the style property of the object of the swimlane cell (type: "$sgroup").

const data = [
{
"id": "main",
"type": "$swimlane",
"height": 730,
"width": 1195,
"layout": [
[1, 2, 3, 4]
],
...
},
{
"id": 1,
"type": "$sgroup",
"style": {
"fill": "rgba(243, 92, 79, 0.05)"
},
"x": 0,
"y": 80
},
];

Related sample: Diagram. Default mode. Waterfall diagram template