$(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.

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

jQuery Diagram - customShapes.connectionPoints

jQuery

side

x

y