New to Kendo UI for jQueryStart a free 30-day trial

ConnectorDefaults

configuration

Defines default options for the shape connectors.

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;

  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");

  var shape = new Shape({
    id: 1,
    x: 40,
    y: 40,
    fill: "#c0f0fc",
    connectorDefaults: {
      width: 10,
      height: 10,
      fill: {
        color: "blue",
        opacity: 0.5
      },
      stroke: {
        width: 2,
        color: "lightgreen"
      },
      hover: {
        fill: {
          color: "yellow"
        },
        stroke: {
          color: "lightgreen"
        }
      }
    }
  });
  diagram.addShape(shape);
</script>

Defines the fill options of the shape connectors.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Connector Fill"
        },
        connectorDefaults: {
            fill: {
                color: "lightblue",
                opacity: 0.8
            }
        }
    }]
});
</script>

Defines the height of the shape connectors.

Default: 8

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Tall Connectors"
        },
        connectorDefaults: {
            height: 12
        }
    }]
});
</script>

Defines the hover configuration of the shape connectors.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Hover Connectors"
        },
        connectorDefaults: {
            hover: {
                fill: {
                    color: "yellow"
                },
                stroke: {
                    color: "red",
                    width: 2
                }
            }
        }
    }]
});
</script>

Defines the stroke options of the shape connectors.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Connector Stroke"
        },
        connectorDefaults: {
            stroke: {
                color: "navy",
                width: 2,
                dashType: "dashDot"
            }
        }
    }]
});
</script>

Defines the width of the shape connectors.

Default: 8

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Wide Connectors"
        },
        connectorDefaults: {
            width: 15
        }
    }]
});
</script>