shapeDefaults.connectors Array

Defines the connectors the shape owns. A connector is the point in the shape where a connection between this shape and another one can originate from or end.

• "top" - top connector.
• "right" - right connector.
• "bottom" - bottom connector.
• "bottomRight" - bottom right connector.
• "left" - left connector.
• "auto" - auto connector.

You can define your own custom connectors or use the predefined types.

Example - including only some connectors and customize their look

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      connectors: [
        {
          name: "top",
          width: 15,
          height: 15,
          fill: {
            color: "green",
            opacity: 0.7
          },
          hover: {
            fill: {
              color: "lightblue"
            },
            stroke: {
              color: "gray",
              dashType: "dot"
            }
          },
          stroke: {
            width: 2,
            color: "white",
            dashType: "solid"
          }
        },
        {
          name: "bottom"
        }]
    },
    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",
      fromConnector: "top",
      toConnector: "top"
    },{
      from: "2",
      to: "3",
      fromConnector: "bottom",
      toConnector: "top"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

The following example demonstrates how to define a custom shape with connectors adapted to the outline of the shape. You can see how the shape bounds are accessed and used to determine the position of the connectors.

Example - creating a custom shape with custom connectors

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    dataSource: [{name: "item1"}],
    shapeDefaults: {
      path: "m1,53.69333l17.5647,-17.56445l0,8.78235l23.15292,0l0,-26.34678l-8.78181,0l17.56417,-17.56444l17.5647,17.56444l-8.78238,0l0,26.34678l23.15297,0l0,-8.78235l17.56473,17.56445l-17.56473,17.56466l0,-8.78231l-63.87057,0l0,8.78231l-17.5647,-17.56466l0,0z",
      connectors: [{
        name: "Upstream",
        position: function(shape) {
          return shape._transformPoint(shape.bounds().top());
        }
      }, {
        name: "SideLeft",
        position: function(shape) {
          var p = shape.bounds().left();
          return shape._transformPoint(new kendo.dataviz.diagram.Point(p.x, p.y + 17));
        }
      }, {
        name: "SideRight",
        position: function(shape) {
          var p = shape.bounds().right();
          return shape._transformPoint(new kendo.dataviz.diagram.Point(p.x, p.y + 17));
        }
      }]
    }
  });
</script>

shapeDefaults.connectors.name String

The connector name. The name is referenced when specifying explicit fromConnector and toConnector values in a connection.

shapeDefaults.connectors.position Function

The function that positions the connector. The function is passed a shape and should return kendo.dataviz.diagram. As a result, a point that holds the connector position appears.

shapeDefaults.connectors.width Number (default: 8)

Defines the width of the shape connectors.

shapeDefaults.connectors.height Number (default: 8)

Defines the height of the shape connectors.

shapeDefaults.connectors.hover Object

Defines the hover configuration of the shape connectors.

shapeDefaults.connectors.hover.fill String|Object

Defines the hover fill options of the shape connectors.

shapeDefaults.connectors.hover.fill.color String

Defines the hover fill color of the shape connectors.

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

Defines the hover fill opacity of the shape connectors.

shapeDefaults.connectors.hover.stroke String|Object

Defines the hover stroke options of the shape connectors.

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

Defines the hover stroke color.

shapeDefaults.connectors.hover.stroke.dashType String

The hover 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

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

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

shapeDefaults.connectors.fill String|Object

Defines the fill options of the shape connectors.

shapeDefaults.connectors.fill.color String

Defines the fill color of the shape connectors.

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

Defines the fill opacity of the shape connectors.

shapeDefaults.connectors.stroke String|Object

Defines the stroke options of the shape connectors.

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

Defines the stroke color.

shapeDefaults.connectors.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.connectors.stroke.width Number (default: 1)

Defines the thickness or width of the shape connectors stroke.