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

StartCap.stroke

configuration

The connection start cap stroke options or color.

startCap.stroke

String|Object

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
  var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

  var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    startCap: {
      type: "arrow",
      stroke: "red"
    },
    selectable: false
  });

  diagram.addConnection(connection);
</script>

startCap.stroke.color

String

The connection start cap stroke color.

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
  var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

  var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    startCap: {
      type: "arrow",
      stroke: {
        color: "purple"
      }
    },
    selectable: false
  });

  diagram.addConnection(connection);
</script>

startCap.stroke.dashType

String

The connection start cap stroke dash type.

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
  var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

  var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    startCap: {
      type: "arrow",
      stroke: {
        dashType: "dash"
      }
    },
    selectable: false
  });

  diagram.addConnection(connection);
</script>

startCap.stroke.width

Number

The connection start cap stroke width.

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
  var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

  var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    startCap: {
      type: "arrow",
      stroke: {
        width: 3
      }
    },
    selectable: false
  });

  diagram.addConnection(connection);
</script>