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

Connections.endCap.stroke

configuration

The connection end cap stroke options or color.

connections.endCap.stroke

String|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",
      endCap: {
        type: "ArrowEnd",
        stroke: {
          color: "#333",
          width: 2
        }
      }
    }]
});
</script>

connections.endCap.stroke.color

String

The connection end cap stroke color.

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

connections.endCap.stroke.dashType

String

The connection end cap stroke dash type.

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", x: 100, y: 100, content: { text: "Shape 1" } },
      { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
      from: "1",
      to: "2",
      endCap: {
        type: "ArrowEnd",
        stroke: {
          color: "#333",
          dashType: "dash",
          width: 2
        }
      }
    }]
});
</script>

connections.endCap.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",
      endCap: {
        type: "ArrowEnd",
        stroke: {
          color: "#333",
          width: 2,
          lineCap: "round"
        }
      }
    }]
});
</script>

connections.endCap.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",
      endCap: {
        type: "ArrowEnd",
        stroke: {
          color: "#333",
          width: 2,
          lineJoin: "round"
        }
      }
    }]
});
</script>

connections.endCap.stroke.width

Number

The connection end cap stroke width.

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