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

ConnectionDefaults.endCap.fill

configuration

The connections end cap fill options or color.

connectionDefaults.endCap.fill

String|Object

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        endCap: {
            fill: "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>

connectionDefaults.endCap.fill.color

String

The connections end cap fill color.

Default: "black"

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        endCap: {
            fill: {
                color: "blue"
            },
            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.fill.opacity

The connections end cap fill opacity.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        endCap: {
            fill: {
                color: "blue",
                opacity: 0.5
            },
            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>