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

Connections.startCap

configuration

The start cap (arrow, head or decoration) of the connection.

connections.startCap

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

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

connections.startCap.fill

String|Object

The connection start 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",
      startCap: {
        type: "ArrowStart",
        fill: "#ff6358"
      }
    }]
});
</script>

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

connections.startCap.radius

Number

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

Default: 4

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connections: [{
      startCap: {
        type: "FilledCircle",
        radius: 8
      }
    }]
});
</script>

connections.startCap.stroke

String|Object

The connection start cap stroke options or color.

<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",
            startCap: {
                stroke: {
                    color: "green",
                    width: 3,
                    dashType: "dash"
                }
            }
        }
    ]
});
</script>

connections.startCap.type

String

The connection start cap type.

The supported values are:

"none": no cap
"ArrowStart": a filled arrow
"FilledCircle": a filled circle

Default: "none"

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

Related Members