connectionDefaults.endCap String|Object

The connections end cap configuration. Can be set to a configuration object or a string that represents the endCap.type value.

Example - configuring the connection end cap

<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: {
      endCap: {
        type: "FilledCircle",
        fill: {
          color: "red"
        },
        stroke: {
          color: "blue",
          width: 2
        }
      }
    }
  });
</script>

connectionDefaults.endCap.fill String|Object

The connections end cap fill options or color.

connectionDefaults.endCap.fill.color String (default: "black")

The connections end cap fill color.

connectionDefaults.endCap.fill.opacity

The connections end cap fill opacity.

connectionDefaults.endCap.stroke String|Object

The connections end cap stroke options or color.

connectionDefaults.endCap.stroke.color String

The connections end cap stroke color.

connectionDefaults.endCap.stroke.dashType String

The connections 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

connectionDefaults.endCap.stroke.width Number

The connections end cap stroke width.

connectionDefaults.endCap.type String (default: "none")

The end cap type used in connections.

The supported values are:

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