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

Shapes.connectors.hover.stroke

configuration

Defines the hover stroke options of the shape connectors.

shapes.connectors.hover.stroke

String|Object

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: { text: "Hover Stroke Demo" },
        x: 100,
        y: 20,
        connectors: [{
            name: "right",
            hover: {
                stroke: {
                    color: "#cc0066",
                    width: 3,
                    dashType: "dash"
                }
            }
        }]
    }]
});
</script>

shapes.connectors.hover.stroke.color

String

Defines the hover stroke color.

Default: "Black"

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: { text: "Purple Hover Stroke" },
        x: 100,
        y: 20,
        connectors: [{
            name: "auto",
            hover: {
                stroke: {
                    color: "#9933cc"
                }
            }
        }]
    }]
});
</script>

shapes.connectors.hover.stroke.dashType

String

The dash type of the hover stroke.

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: "Dashed Hover" },
        x: 100,
        y: 20,
        connectors: [{
            name: "top",
            hover: {
                stroke: {
                    dashType: "longDashDot",
                    color: "#cc6600"
                }
            }
        }]
    }]
});
</script>

shapes.connectors.hover.stroke.width

Number

Defines the thickness or width of the shape connectors stroke on hover.

Default: 1

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: { text: "Thick Hover Stroke" },
        x: 100,
        y: 20,
        connectors: [{
            name: "bottom",
            hover: {
                stroke: {
                    width: 5,
                    color: "#006600"
                }
            }
        }]
    }]
});
</script>