All docs
V19.1
20.2
20.1
19.2
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.
A newer version of this page is available. Switch to the current version.

connectionPoints[]

An array of a shape's connection points.

Type:

Array<Object>

jQuery
JavaScript
$(function() {
    var diagram = $("#diagram").dxDiagram({
        customShapes: [{
            id: 0,
            connectionPoints: [
                { x: 0.5, y: 0 },
                { x: 0.9, y: 0.5 },
                { x: 0.5, y: 1 },
                { x: 0.1, y: 0.5 }
            ]
            // ...

Diagram - Connection Points

side

Specifies the direction of a connection point.

Type:

String

Accepted Values: 'north' | 'east' | 'south' | 'west'

x

Specifies the horizontal offset.

Type:

Number

This option specifies a fractional horizontal offset of a connection point toward the shape width.

  • If the x option is set to 0, the connection point matches the shape's left edge.
  • If the x option is set to 1, the connection point matches the shape's right edge.

y

Specifies the vertical offset.

Type:

Number

This option specifies a fractional vertical offset of a connection point toward the shape height.

  • If the y option is set to 0, the connection point matches the shape's bottom edge.
  • If the y option is set to 1, the connection point matches the shape's top edge.