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

ConnectionDefaults.endCap.stroke

configuration

The connections end cap stroke options or color.

connectionDefaults.endCap.stroke

String|Object

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        endCap: {
            stroke: "green",
            type: "ArrowEnd"
        }
    },
    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>

connectionDefaults.endCap.stroke.color

String

The connections end cap stroke color.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        endCap: {
            stroke: {
                color: "purple",
                width: 2
            },
            type: "ArrowEnd"
        }
    },
    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>

connectionDefaults.endCap.stroke.dashType

String

The connections end 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({
    connectionDefaults: {
        endCap: {
            stroke: {
                dashType: "dash",
                color: "red",
                width: 2
            },
            type: "ArrowEnd"
        }
    },
    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>

connectionDefaults.endCap.stroke.lineCap

String

Defines the line cap style of the stroke. Supported values are "butt", "round", and "square".

connectionDefaults.endCap.stroke.lineJoin

String

Defines the line join style of the stroke. Supported values are "bevel", "miter", and "round".

connectionDefaults.endCap.stroke.width

Number

The connections end cap stroke width.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        endCap: {
            stroke: {
                width: 3,
                color: "red"
            },
            type: "ArrowEnd"
        }
    },
    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>