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

Connections.endCap

configuration

The connection end cap configuration or type name.

connections.endCap

String|Object

<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.anchor

Object

The anchor point of the arrow marker. This is the point where the marker will be positioned relative to the line. Applies when the type is "ArrowEnd" or "ArrowStart".

<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",
        path: "M 0 0 L 10 5 L 0 10 Z",
        anchor: { x: 5, y: 5 }
      }
    }]
});
</script>

connections.endCap.fill

String|Object

The connection end cap fill options or 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",
        fill: "#ff6358"
      }
    }]
});
</script>

connections.endCap.path

String

The SVG path data for the arrow marker. Applies when the type is "ArrowEnd" or "ArrowStart".

<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",
        path: "M 0 0 L 10 5 L 0 10 Z"
      }
    }]
});
</script>

connections.endCap.radius

Number

The radius of the filled circle marker. Applies when the type is "FilledCircle".

Default: 4

<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: "FilledCircle",
        radius: 8
      }
    }]
});
</script>

connections.endCap.stroke

String|Object

The connection end cap stroke options or 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.type

String

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.

Default: "none"

<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: "FilledCircle"
      }
    }]
});
</script>

Related Members