connectionDefaults.startCapString|Object

The connection start cap configuration or type name.

Example - configuring the connection start cap

<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"
      }
    ],
    connectionDefaults: {
      startCap: {
        type: "FilledCircle",
        fill: {
          color: "yellow"
        },
        stroke: {
          color: "blue",
          width: 3
        }
      }
    }
  });
</script>

connectionDefaults.startCap.fillString|Object

The connection start cap fill options or color.

Example

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        startCap: {
            fill: "red",
            type: "ArrowStart"
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.startCap.fill.colorString(default: "black")

The connection start cap fill color.

Example

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        startCap: {
            fill: {
                color: "blue"
            },
            type: "ArrowStart"
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.startCap.fill.opacity

The connection start cap fill opacity.

Example

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        startCap: {
            fill: {
                color: "blue",
                opacity: 0.7
            },
            type: "ArrowStart"
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.startCap.strokeString|Object

The connection start cap stroke options or color.

Example

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        startCap: {
            stroke: "green",
            type: "ArrowStart"
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.startCap.stroke.colorString

The connection start cap stroke color.

Example

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        startCap: {
            stroke: {
                color: "purple",
                width: 2,
            },
            type: "ArrowStart"
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.startCap.stroke.dashTypeString

The connection start cap stroke dash type.

The following dash types are supported:

  • "dash" - A line that consists of dashes
  • "dashDot" - A line that consists of a repeating pattern of dash-dot
  • "dot" - A line that consists of dots
  • "longDash" - A line that consists of a repeating pattern of long-dash
  • "longDashDot" - A line that consists of a repeating pattern of long-dash-dot
  • "longDashDotDot" - A line that consists of a repeating pattern of long-dash-dot-dot
  • "solid" - A solid line

Example

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        startCap: {
            stroke: {
                dashType: "dash",
                color: "red",
                width: 2
            },
            type: "ArrowStart"
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.startCap.stroke.widthNumber

The connection start cap stroke width.

Example

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        startCap: {
            stroke: {
                width: 3,
                color: "red"
            },
            type: "ArrowStart"
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.startCap.typeString(default: "none")

The connection start cap type.

The supported values are:

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

Example

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        startCap: {
            type: "ArrowStart"
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.startCap.pathString

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

Example - using custom SVG path for start cap

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes:[
      { id:"1", content: { text: "Start" }, x: 20, y: 20 },
      { id:"2", content: { text: "End" }, x: 200, y: 20 }
    ],
    connections:[
      { from: "1", to: "2" }
    ],
    connectionDefaults: {
      startCap: {
        type: "ArrowStart",
        path: "M 0,0 L 10,5 L 0,10 z"
      }
    }
  });
</script>

connectionDefaults.startCap.anchorObject

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

Example - setting custom anchor point for start cap

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes:[
      { id:"1", content: { text: "Start" }, x: 20, y: 20 },
      { id:"2", content: { text: "End" }, x: 200, y: 20 }
    ],
    connections:[
      { from: "1", to: "2" }
    ],
    connectionDefaults: {
      startCap: {
        type: "ArrowStart",
        anchor: { x: 5, y: 5 }
      }
    }
  });
</script>

connectionDefaults.startCap.anchor.xNumber

The x-coordinate of the anchor point.

Example

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes:[
      { id:"1", content: { text: "Start" }, x: 20, y: 20 },
      { id:"2", content: { text: "End" }, x: 200, y: 20 }
    ],
    connections:[
      { from: "1", to: "2" }
    ],
    connectionDefaults: {
      startCap: {
        type: "ArrowStart",
        anchor: { x: 8, y: 5 }
      }
    }
  });
</script>

connectionDefaults.startCap.anchor.yNumber

The y-coordinate of the anchor point.

Example

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes:[
      { id:"1", content: { text: "Start" }, x: 20, y: 20 },
      { id:"2", content: { text: "End" }, x: 200, y: 20 }
    ],
    connections:[
      { from: "1", to: "2" }
    ],
    connectionDefaults: {
      startCap: {
        type: "ArrowStart",
        anchor: { x: 5, y: 8 }
      }
    }
  });
</script>

connectionDefaults.startCap.radiusNumber(default: 4)

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

Example

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes:[
      { id:"1", content: { text: "Start" }, x: 20, y: 20 },
      { id:"2", content: { text: "End" }, x: 200, y: 20 }
    ],
    connections:[
      { from: "1", to: "2" }
    ],
    connectionDefaults: {
      startCap: {
        type: "FilledCircle",
        radius: 8
      }
    }
  });
</script>