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

Connections.startCap.stroke

configuration

The connection start cap stroke options or color.

connections.startCap.stroke

String|Object

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            content: {
                text: "State 1"
            },
            x: 20,
            y: 20
        },
        {
            id: "2",
            content: {
                text: "State 2"
            },
            x: 200,
            y: 20
        }
    ],
    connections: [
        {
            from: "1",
            to: "2",
            startCap: {
                stroke: {
                    color: "green",
                    width: 3,
                    dashType: "dash"
                }
            }
        }
    ]
});
</script>

connections.startCap.stroke.color

String

The connection start cap stroke color.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            content: {
                text: "State 1"
            },
            x: 20,
            y: 20
        },
        {
            id: "2",
            content: {
                text: "State 2"
            },
            x: 200,
            y: 20
        }
    ],
    connections: [
        {
            from: "1",
            to: "2",
            startCap: {
                stroke: {
                    color: "red"
                }
            }
        }
    ]
});
</script>

connections.startCap.stroke.dashType

String

The connection start cap stroke dash type.

The following dash types are supported:

"dash" - A line that consists of dashes
"dashDot" - A line that consists of a repeating pattern of dash-dot
"dot" - A line that consists of dots
"longDash" - A line that consists of a repeating pattern of long-dash
"longDashDot" - A line that consists of a repeating pattern of long-dash-dot
"longDashDotDot" - A line that consists of a repeating pattern of long-dash-dot-dot
"solid" - A solid line

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            content: {
                text: "State 1"
            },
            x: 20,
            y: 20
        },
        {
            id: "2",
            content: {
                text: "State 2"
            },
            x: 200,
            y: 20
        }
    ],
    connections: [
        {
            from: "1",
            to: "2",
            startCap: {
                stroke: {
                    dashType: "dash"
                }
            }
        }
    ]
});
</script>

connections.startCap.stroke.width

Number

The connection start cap stroke width.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            content: {
                text: "State 1"
            },
            x: 20,
            y: 20
        },
        {
            id: "2",
            content: {
                text: "State 2"
            },
            x: 200,
            y: 20
        }
    ],
    connections: [
        {
            from: "1",
            to: "2",
            startCap: {
                stroke: {
                    width: 4
                }
            }
        }
    ]
});
</script>