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

Connections.startCap.fill

configuration

The connection start cap fill options or color.

connections.startCap.fill

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: "#ff6358"
      }
    }]
});
</script>

connections.startCap.fill.color

String

The connection start cap fill color.

Default: "black"

<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: "#ff6358"
        }
      }
    }]
});
</script>

connections.startCap.fill.opacity

The connection start cap fill opacity.

<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: "#ff6358",
          opacity: 0.7
        }
      }
    }]
});
</script>