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

ConnectionDefaults.stroke

configuration

Defines the connection line configuration.

connectionDefaults.stroke

Object

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

connectionDefaults.stroke.color

String

Defines the stroke or line color of the connection.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        stroke: {
            color: "#FF6600",
            width: 2
        }
    },
    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.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", content: { text: "Start" }, x: 20, y: 20 },
      { id:"2", content: { text: "End" }, x: 200, y: 20 }
    ],
    connections:[
      { from: "1", to: "2" }
    ],
    connectionDefaults: {
      stroke: {
        color: "blue",
        width: 5,
        lineCap: "round"
      }
    }
  });
</script>

connectionDefaults.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", content: { text: "Start" }, x: 20, y: 20 },
      { id:"2", content: { text: "End" }, x: 200, y: 20 }
    ],
    connections:[
      { from: "1", to: "2", points: [{ x: 110, y: 50 }] }
    ],
    connectionDefaults: {
      stroke: {
        color: "blue",
        width: 8,
        lineJoin: "round"
      },
      type: "polyline"
    }
  });
</script>

connectionDefaults.stroke.width

Number

Defines the stroke width of the connection.

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