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

ConnectorDefaults.stroke

configuration

Defines the stroke options of the shape connectors.

connectorDefaults.stroke

String|Object

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Connector Stroke"
        },
        connectorDefaults: {
            stroke: {
                color: "navy",
                width: 2,
                dashType: "dashDot"
            }
        }
    }]
});
</script>

connectorDefaults.stroke.color

String

Defines the stroke color.

Default: "Black"

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Connector Stroke Color"
        },
        connectorDefaults: {
            stroke: {
                color: "brown"
            }
        }
    }]
});
</script>

connectorDefaults.stroke.dashType

String

The stroke dash type.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Connector Dash Type"
        },
        connectorDefaults: {
            stroke: {
                color: "teal",
                dashType: "longDash"
            }
        }
    }]
});
</script>

connectorDefaults.stroke.width

Number

Defines the thickness or width of the shape connectors stroke.

Default: 1

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Connector Stroke Width"
        },
        connectorDefaults: {
            stroke: {
                color: "maroon",
                width: 3
            }
        }
    }]
});
</script>