shapeDefaults.connectorDefaults Object

Defines the default options for the shape connectors.

Example - customizing the Diagram shape connectors

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      connectorDefaults: {
        width: 10,
        height: 10,
        fill: {
          color: "green",
          opacity: 0.7
        },
        hover: {
          fill: {
            color: "lightblue"
          },
          stroke: {
            color: "yellow",
            dashType: "dot"
          }
        },
        stroke: {
          width: 2,
          color: "yellow",
          dashType: "solid"
        }
      }
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      },
      x: 100,
      y: 20
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      },
      x: 250,
      y: 20
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      },
      x: 250,
      y: 200
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapeDefaults.connectorDefaults.width Number (default: 8)

Defines the width of the shape connectors.

shapeDefaults.connectorDefaults.height Number (default: 8)

Defines the height of the shape connectors.

shapeDefaults.connectorDefaults.hover Object

Defines the hover configuration of the shape connectors.

shapeDefaults.connectorDefaults.hover.fill String|Object

Defines the hover fill options of the shape connectors.

shapeDefaults.connectorDefaults.hover.fill.color String

Defines the hover fill color of the shape connectors.

shapeDefaults.connectorDefaults.hover.fill.opacity Number (default: 1)

Defines the hover fill opacity of the shape connectors.

shapeDefaults.connectorDefaults.hover.stroke String|Object

Defines the hover stroke options of the shape connectors.

shapeDefaults.connectorDefaults.hover.stroke.color String (default: "Black")

Defines the hover stroke color.

shapeDefaults.connectorDefaults.hover.stroke.dashType String

The dash type of the hover stroke.

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

shapeDefaults.connectorDefaults.hover.stroke.width Number (default: 1)

Defines the thickness or width of the shape connectors stroke on hover.

shapeDefaults.connectorDefaults.fill String|Object

Defines the fill options of the shape connectors.

shapeDefaults.connectorDefaults.fill.color String

Defines the fill color of the shape connectors.

shapeDefaults.connectorDefaults.fill.opacity Number (default: 1)

Defines the fill opacity of the shape connectors.

shapeDefaults.connectorDefaults.stroke String|Object

Defines the stroke options of the shape connectors.

shapeDefaults.connectorDefaults.stroke.color String (default: "Black")

Defines the stroke color.

shapeDefaults.connectorDefaults.stroke.dashType String

Defines the stroke dash type. The following dash types are supported:

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

shapeDefaults.connectorDefaults.stroke.width Number (default: 1)

Defines the thickness or width of the shape connectors stroke.