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

ShapeDefaults

configuration

Defines the default options that will be applied to all shapes in the Diagram.

shapeDefaults

Object

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        width: 120,
        height: 60,
        fill: "lightblue",
        stroke: {
            color: "navy",
            width: 2
        }
    },
    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" }
    ]
});
</script>

shapeDefaults.accessibility

Object

Defines accessibility options for shapes.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        accessibility: {
            role: "graphics-symbol",
            ariaRoleDescription: "Diagram Shape",
            ariaLabel: "Process step"
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Step 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Step 2" } }
    ],
    connections: [
        { from: "1", to: "2" }
    ]
});
</script>

shapeDefaults.center

Object

Defines the center position of the shape. Applicable for the circle shape.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      type: "circle",
      center: { x: 100, y: 100 },
      radius: 40,
      fill: { color: "lightgreen" }
    },
    shapes: [
      { content: { text: "Circle" } }
    ]
  });
</script>

shapeDefaults.connectorDefaults

Object

Defines the default options for the 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.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.

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

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

Object

Defines the default shapes content settings.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        align: "top left",
        color: "yellow",
        fontFamily: "Tahoma",
        fontSize: 16,
        fontStyle: "italic",
        fontWeight: 200
      }
    },
    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.cornerRadius

Number

Defines the corner radius of the shape.

Default: 0

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      cornerRadius: 10,
      fill: { color: "lightblue" },
      width: 100,
      height: 60
    },
    shapes: [
      { content: { text: "Rounded Shape" }, x: 50, y: 50 }
    ]
  });
</script>

shapeDefaults.editable

Boolean|Object

Defines the shape editable options.

Default: true

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        editable: {
            connect: true,
            drag: true,
            resize: true,
            rotate: true
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Editable Shape" } }
    ]
});
</script>

shapeDefaults.fill

String|Object

Defines the fill options of the shape. Use these settings to apply a single-color or a gradient background to all shapes in the Diagram.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: "tree",
    shapeDefaults: {
      fill: {
        color: "red",
        opacity: 0.5
      }
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapeDefaults.height

Number

Defines the default height of shapes in the Diagram.

Default: 100

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: "tree",
    shapeDefaults: {
      height: 50
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapeDefaults.hover

Object

Defines the hover configuration.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: "tree",
    shapeDefaults: {
      hover: {
        fill: {
          color: "pink"
        }
      }
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapeDefaults.minHeight

Number

Defines the minimum height the shape can have. Use this setting to apply a lower limit to the height of shapes when users resize them.

Default: 20

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: "tree",
    shapeDefaults: {
      minHeight: 80
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapeDefaults.minWidth

Number

Defines the minimum width the shape can have. Use this setting to apply a lower limit to the width of shapes when users resize them.

Default: 20

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: "tree",
    shapeDefaults: {
      minWidth: 80
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapeDefaults.path

String

The path option of a Shape is a description of a custom geometry. The format follows the standard SVG format (https://www.w3.org/TR/SVG/paths.html#PathData "SVG Path data.").

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: "tree",
    shapeDefaults: {
      path: "m35.15,0 L84.85,0 L120,35.15 L120,84.85 L84.85,120 L35.15,120 L0,84.85 L0,35.15 z"
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapeDefaults.radius

Number

Defines the radius of the shape. Applicable for the circle shape.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      type: "circle",
      radius: 50,
      fill: { color: "pink" },
      stroke: { color: "red", width: 2 }
    },
    shapes: [
      { content: { text: "Large Circle" }, x: 100, y: 100 }
    ]
  });
</script>

shapeDefaults.rotation

Object

Defines the rotation of the shape.

Default: null

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: "layered",
    shapeDefaults: {
      rotation: {
        angle: 25
      }
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapeDefaults.selectable

Boolean

Specifies if Diagram shapes can be selected.

Default: true

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: "layered",
    shapeDefaults: {
      selectable: false
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapeDefaults.source

String

The path/URL to the shape image. Applicable when the type is set to "image".

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: "layered",
    shapeDefaults: {
      type: "image",
      source: "https://demos.telerik.com/kendo-ui/html5-dashboard-sample-app/Content/Products/4.jpg",
      content: {
        color: "#fff"
      }
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapeDefaults.stroke

Object

Defines the configuration of the border around Diagram shapes.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: "layered",
    shapeDefaults: {
      stroke: {
        color: "rgb(92, 229, 0)",
        dashType: "dashDot",
        width: 3
      }
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapeDefaults.type

String

Specifies the type of the Shape using any of the built-in shape type.

rectangle: this is the default option
circle: a circle/ellipse
image: an image
text: some text

Or common workflow shapes as:

Terminator: Start and end points of the workflow.
Process: Standard processing steps or actions.
Decision: Decision points with Yes/No or True/False branches.
Document: Document creation or data output.
PredefinedProcess: Subroutines or predefined operations.
Database:Database operations or data storage.
Delay:Wait periods or time-based operations.
ManualOperation:Manual tasks requiring human intervention.

Default: "rectangle"

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: "layered",
    shapeDefaults: {
      type: "circle"
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapeDefaults.visual

Function

A function that returns a visual element to render for a given shape. The following primitives can be used to construct a composite visual:

The origin of the visual bounding box has to be (0, 0). If you have a complex path which coordinates cannot be easily adjusted, then position the element as demonstrated in this example.

<div id="diagram"></div>
<script>
    var diagram = kendo.dataviz.diagram;
    var getVisual = function(data) {
        var g = new diagram.Group({
            autoSize: true
        });
        var r = new diagram.Circle({
            width : 100,
            height: 60,
            fill: "LimeGreen"
        });
        g.append(r);
        var fn = new diagram.TextBlock({
            text: data.dataItem.name,
            fontSize: 16,
            x: 25,
            y: 20
        });
        g.append(fn);

        return g;
    };

    $("#diagram").kendoDiagram({
        dataSource: [{
            "name" : "Telerik",
            "items": [
                {"name": "Kendo"},
                {"name": "Icenium"}
            ]
        }],
        shapeDefaults: {
            visual: getVisual
        }
    });

    $("#diagram").getKendoDiagram().layout();
</script>

shapeDefaults.width

Number

Defines the default width of shapes in the Diagram.

Default: 100

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: "layered",
    shapeDefaults: {
      width: 180
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapeDefaults.x

Number

Defines the x-coordinate of shapes added to the Diagram.

Default: 0

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        x: 200
    },
    shapes: [
        { content: { text: "Shape 1" } },
        { content: { text: "Shape 2" } }
    ]
});
</script>

shapeDefaults.y

Number

Defines the y-coordinate of shapes added to the Diagram.

Default: 0

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        x: 100,
        y: 150
    },
    shapes: [
        { content: { text: "Shape 1" } },
        { content: { text: "Shape 2" } }
    ]
});
</script>

Related Members