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

Connections.endCap.anchor

configuration

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

connections.endCap.anchor

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

connections.endCap.anchor.x

Number

The x-coordinate of the anchor point.

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

connections.endCap.anchor.y

Number

The y-coordinate of the anchor point.

<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: { y: 5 }
      }
    }]
});
</script>