All docs
V19.1
19.1
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.

customShapes[]

An array of custom shapes.

Type:

Array<Object>

Default Value: []

Use the customShapes option to extend a collection of built-in shapes with custom shapes. Custom shapes are displayed in the toolbox panel’s Custom tab.

View Demo


jQuery
JavaScript
$(function() {
    var diagram = $("#diagram").dxDiagram({
        customShapes: [{
            id: 0,
            title: "Internet",
            svgUrl: "images/shapes/internet.svg",
            defaultWidth: 1.27,
            defaultHeight: 1.27,
            allowHasText: false
        },
        {
            id: 1,
            title: "Laptop",
            svgUrl: "images/shapes/laptop.svg",
            defaultWidth: 1.27,
            defaultHeight: 1.27,
            allowHasText: false
        },
        // ...
        ]
    }).dxDiagram("instance");

});

allowHasText

Specifies whether a shape can contain text.

Type:

Boolean

defaultHeight

Specifies the initial height of a shape that is drag-and-dropped from the toolbox onto the diagram area.

Type:

Number

defaultText

Type:

String

defaultWidth

Specifies the initial width of a shape that is drag-and-dropped from the toolbox to the diagram area.

Type:

Number

id

Specifies a shape's unique identifier.

Type:

Number

svgHeight

Type:

Number

svgLeft

Type:

Number

svgTop

Type:

Number

svgUrl

Specifies a shape image's URL.

Type:

String

NOTE
Shape images should be supplied as SVG files.

svgWidth

Type:

Number

textHeight

Type:

Number

textLeft

Type:

Number

textTop

Type:

Number

textWidth

Type:

Number

title

Specifies a shape's tooltip that is displayed in a toolbox panel.

Type:

String