New to Kendo UI for jQuery? Start a free 30-day trial

Connections

Updated on Mar 5, 2026

The Diagram provides extensive configuration options for connections that link shapes together, enabling you to customize their appearance, routing behavior, and labels.

Connections are the lines that visually represent relationships between shapes in a diagram. The component supports various styling options, routing types, and label configurations to create professional and informative diagrams.

All connection settings described in this article can be applied globally to all connections using the connectionDefaults configuration. Individual connections will inherit these defaults unless explicitly overridden.

Getting Started

To create connections between shapes, specify the from and to properties referencing the shape IDs.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [
        { from: "1", to: "2" }
    ]
});
</script>

Stroke Configuration

The stroke configuration controls the visual appearance of connection lines, including their color, width, and line style.

Defining Color and Width

Use the stroke.color and stroke.width properties to customize the basic appearance of connections.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        stroke: {
            color: "#ff6358",
            width: 3
        }
    }]
});
</script>

The color accepts any valid CSS color value, and width is specified in pixels.

Setting Dash Type

The stroke.dashType property allows you to create dashed or dotted connection lines. This is useful for representing different types of relationships.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Primary" } },
        { id: "2", x: 300, y: 100, content: { text: "Secondary" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        stroke: {
            color: "#333",
            width: 2,
            dashType: "dash"
        }
    }]
});
</script>

The supported dash types include "dash", "dashDot", "dot", "longDash", "longDashDot", "longDashDotDot", and "solid".

Advanced Stroke Options

The stroke configuration also supports lineCap and lineJoin properties for fine-tuning the appearance of connection endpoints and corners.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        stroke: {
            color: "#333",
            width: 4,
            lineCap: "round",
            lineJoin: "round"
        }
    }]
});
</script>

Connection Types

The type property specifies how connections route between shapes. The default value is "cascading".

Cascading Connections

Cascading connections automatically create a rectangular path between endpoints, which is particularly useful for tree layouts and hierarchical diagrams.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 20, y: 20, content: { text: "Parent" } },
        { id: "2", x: 300, y: 100, content: { text: "Child" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        type: "cascading"
    }]
});
</script>

Cascading connections ignore any intermediate points and automatically calculate the optimal rectangular route.

Polyline Connections

Polyline connections allow you to define custom paths by specifying intermediate points. This provides precise control over the connection routing.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 20, y: 20, content: { text: "State 1" } },
        { id: "2", x: 300, y: 100, content: { text: "State 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        type: "polyline",
        points: [
            { x: 150, y: 20 },
            { x: 150, y: 150 }
        ]
    }]
});
</script>

Connection Content

The content configuration enables you to add labels to connections with extensive styling and positioning options.

Basic Text Label

Add a text label to a connection using the content.text property.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Connection Label"
        }
    }]
});
</script>

Styling Label Text

Customize the appearance of connection labels with font properties and colors.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 20, y: 20, content: { text: "State 1" } },
        { id: "2", x: 300, y: 20, content: { text: "State 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Step 1",
            color: "purple",
            fontFamily: "Tahoma",
            fontSize: 16,
            fontStyle: "italic",
            fontWeight: 600
        }
    }]
});
</script>

Label Background and Border

Add visual emphasis to connection labels by configuring background colors and borders.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Important",
            background: "#ffeb3b",
            border: {
                color: "#000",
                width: 1,
                dashType: "solid"
            }
        }
    }]
});
</script>

The border.dashType supports the same values as stroke dash types.

Label Positioning

Control the position of connection labels relative to the connection path using the position property.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Connection",
            position: "inline"
        }
    }]
});
</script>

Set position to "inline" to place the label along the connection path, or use an object to specify vertical and horizontal alignment.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 200, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Connection",
            position: {
                vertical: "bottom",
                horizontal: "left"
            }
        }
    }]
});
</script>

For horizontal connections, vertical supports "top" and "bottom". For vertical connections, horizontal supports "left" and "right".

Label Padding

Configure padding around connection labels when using backgrounds or borders.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Connection",
            background: "#ffeb3b",
            padding: 10
        }
    }]
});
</script>

Specify uniform padding as a number, or use an object for individual side padding.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Connection",
            background: "#ffeb3b",
            padding: {
                top: 10,
                right: 15,
                bottom: 10,
                left: 15
            }
        }
    }]
});
</script>

Label Offset

The offset property controls the distance in pixels between the label and the connection path. The default value is 5 pixels.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Connection",
            offset: 15
        }
    }]
});
</script>

Label Templates

Use the content.template property to create dynamic labels based on connection data.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 20, y: 20, content: { text: "State 1" } },
        { id: "2", x: 300, y: 20, content: { text: "State 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            template: function() {
                return "Iteration on " + kendo.toString(new Date(), "MM/dd/yyyy");
            }
        }
    }]
});
</script>

Connector Direction

Specify which connector points to a shape with the fromConnector and toConnector properties.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        fromConnector: "right",
        toConnector: "left"
    }]
});
</script>

The valid values are "top", "right", "bottom", "left", and "auto". The default is "auto".

Corner Radius

Round the corners of connection paths using the cornerRadius property.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 200, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        cornerRadius: 10
    }]
});
</script>

End Caps

Configure the appearance of connection endpoints using the endCap property.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        endCap: {
            type: "ArrowEnd",
            fill: { color: "#333" }
        }
    }]
});
</script>

Hover Styling

Define special styling that applies when users hover over connections.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        hover: {
            stroke: {
                color: "#0056b3",
                width: 3
            }
        }
    }]
});
</script>

Editing Options

Control the editing behavior of connections using the editable property.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        editable: {
            tools: ["delete"]
        }
    }]
});
</script>

Set editable to false to disable editing for specific connections, or configure the tools array to specify available editing tools.