Edit this page

connections.endCap String |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: "Tuesday"
    }],
    connections: [{
      from: "1",
      to: "2",
      endCap: {
        type: "FilledCircle",
        fill: {
          color: "red"
        },
        stroke: {
          color: "blue",
          width: 2
        }
      }
    }]
  });
</script>

connections.endCap.fill String |Object

The connection end cap fill options or color.

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

The connection end cap fill color.

connections.endCap.fill.opacity

The connection end cap fill opacity.

connections.endCap.stroke String |Object

The connection end cap stroke options or color.

connections.endCap.stroke.color String

The connection end cap stroke color.

connections.endCap.stroke.dashType String

The connection end cap stroke dash type.

connections.endCap.stroke.width Number

The connection end cap stroke width.

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

The connection end cap type.

The supported values are:

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

Note that you can also use the "ArrowStart" for the endCap but its direction will be inversed.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy