connections.to Object|String|Number

Defines the target of the connection. You can set this property to a value matching a shape id or to an object with XY-coordinates.

Example - configuring connection "from" and "to" settings

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        text: "Step 1"
      },
      x: 100,
      y: 20
    }, {
      id: "2",
      content: {
        text: "Step 2"
      },
      x: 300,
      y: 20
    }],
    connections: [
      {
        from: "1",
        to: "2",
        startCap: "FilledCircle",
        endCap: "ArrowEnd"
      },
      {
        from: "2",
        to: {x: 450, y: 70},
        endCap: "FilledCircle"
      }]
  });
</script>

connections.to.x Number

Defines the point x value.

connections.to.y Number

Defines the point y value.

connections.toConnector String (default: "Auto")

Specifies the name of the target shape connector that should be used by the connection.

Example - ending the connection in the shape "bottom" connector

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        text: "Step 1"
      },
      x: 100,
      y: 20
    }, {
      id: "2",
      content: {
        text: "Step 2"
      },
      x: 300,
      y: 20
    }],
    connections: [
      {
        toConnector: "bottom",
        from: "1",
        to: "2",
        endCap: "ArrowEnd"
      }]
  });
</script>