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

Connections.stroke

configuration

Defines the stroke configuration.

connections.stroke

Object

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        text: "Step 1"
      }
    }, {
      id: "2",
      x: 200,
      content: {
        text: "Step 2"
      }
    }],
    connections: [{
      from: "1",
      to: "2",
      stroke: {
        color: "#33ccff",
        width: 3
      }
    }]
  });
</script>

connections.stroke.color

String

Defines the stroke or line color of the connection.

<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",
      stroke: {
        color: "#ff6358"
      }
    }]
});
</script>

connections.stroke.lineCap

String

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

<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",
        stroke: {
          lineCap: "round",
          width: 4
        }
    }]
});
</script>

connections.stroke.lineJoin

String

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

<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",
        stroke: {
          lineJoin: "round",
          width: 4
        }
    }]
});
</script>

connections.stroke.width

Number

Defines the stroke width of the connection.

<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",
      stroke: {
        color: "#333",
        width: 3
      }
    }]
});
</script>