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

Connections.hover.stroke

configuration

Defines the hover stroke configuration.

connections.hover.stroke

Object

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    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",
      hover: {
        stroke: {
          color: "#ff6358",
          width: 3
        }
      }
    }]
});
</script>

connections.hover.stroke.color

String

Defines the highlight color when the pointer is hovering over the connection.

Default: "#70CAFF"

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    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",
      hover: {
        stroke: {
          color: "#ff6358"
        }
      }
    }]
});
</script>