Edit this page

shapeDefaults.connectors Array

Defines the connectors the shape owns.

  • "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 - Include only some connectors

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    dataSource: [{name: "item1"}],
    shapeDefaults: {
      connectors: [{ name: "top" }, { name: "left" }]
    }
  });
</script>

The following example demonstrates how to define a custom shape with connectors adapted to the shape's outline. To define positions that are relative to the shape, note in particular the various helpful methods such as right(), left(), and top().

Example - 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.

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.

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

The stroke dash type.

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

Defines the thickness or width of the shape connectors stroke.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy