connections.endCapString|Object

The connection end cap configuration or type name.

Example - configuring the connection end cap

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      x: 200,
      content: {
        text: "Tuesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2",
      endCap: {
        type: "FilledCircle",
        fill: {
          color: "red"
        },
        stroke: {
          color: "blue",
          width: 2
        }
      }
    }]
  });
</script>

connections.endCap.fillString|Object

The connection end cap fill options or color.

connections.endCap.fill.colorString(default: "black")

The connection end cap fill color.

connections.endCap.fill.opacity

The connection end cap fill opacity.

connections.endCap.strokeString|Object

The connection end cap stroke options or color.

connections.endCap.stroke.colorString

The connection end cap stroke color.

connections.endCap.stroke.dashTypeString

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

connections.endCap.stroke.widthNumber

The connection end cap stroke width.

connections.endCap.typeString(default: "none")

The connection end cap type.

The supported values are:

  • "none": no cap
  • "ArrowEnd": a filled arrow
  • "FilledCircle": a filled circle

You can also use "ArrowStart" for the endCap but its direction will be inversed.