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

Connections.content.position

configuration

Defines the position of the label relative to the connection path. Can be set to "inline" to position the label along the connection path, or an object with vertical and horizontal properties.

connections.content.position

String|Object

Default: { vertical: "top", horizontal: "right" }

<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>

<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>

connections.content.position.horizontal

String

The horizontal position of the label relative to vertical connections. The supported values are "left" and "right".

Default: "right"

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

connections.content.position.vertical

String

The vertical position of the label relative to horizontal connections. The supported values are "top" and "bottom".

Default: "top"

<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: {
                vertical: "bottom"
            }
        }
    }]
});
</script>