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

Shapes

configuration

Defines the shape options.

shapes

Array

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            x: 100,
            y: 100,
            width: 120,
            height: 60,
            content: { text: "Shape 1" },
            fill: "lightblue"
        },
        {
            id: "2",
            x: 300,
            y: 100,
            width: 120,
            height: 60,
            content: { text: "Shape 2" },
            fill: "lightgreen"
        }
    ],
    connections: [
        { from: "1", to: "2" }
    ]
});
</script>

shapes.accessibility

Object

Defines accessibility options for the shape.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            x: 100,
            y: 100,
            content: { text: "CEO" },
            accessibility: {
                ariaLabel: "Chief Executive Officer position"
            }
        },
        {
            id: "2",
            x: 300,
            y: 100,
            content: { text: "CTO" },
            accessibility: {
                ariaLabel: "Chief Technology Officer position"
            }
        }
    ],
    connections: [
        { from: "1", to: "2" }
    ]
});
</script>

shapes.center

Object

The center point of the shape.

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

shapes.connectorDefaults

Object

Defines default options for all connectors belonging to a given shape.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      x: 20,
      y: 40,
      content: {
        text: "Monday"
      },
      connectorDefaults: {
        width: 10,
        height: 10,
        fill: {
          color: "blue",
          opacity: 0.5
        },
        stroke: {
          width: 2,
          color: "lightgreen"
        },
        hover: {
          fill: {
            color: "yellow"
          },
          stroke: {
            color: "lightgreen"
          }
        }
      }
    }, {
      id: "2",
      x: 200,
      y: 40,
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      x: 380,
      y: 200,
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapes.connectors

Array

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

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      x: 20,
      y: 40,
      content: {
        text: "Monday"
      },
      connectors: [{name: "top", width: 20, height: 20}, {name: "right", width: 10, height: 10}]
    }, {
      id: "2",
      x: 200,
      y: 40,
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      x: 380,
      y: 200,
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2",
      fromConnector: "top"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapes.content

Object

Defines the shapes content settings.

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

shapes.cornerRadius

Number

Defines the corner radius of the shape.

Default: 0

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      type: "rectangle",
      cornerRadius: 10,
      content: { text: "Rounded Rectangle" }
    }]
});
</script>

shapes.dataItem

Object

The data item associated with the shape.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      dataItem: { name: "Process A", status: "active" },
      content: { text: "#= dataItem.name #" }
    }]
});
</script>

shapes.editable

Boolean|Object

Defines the shape editable options.

Default: true

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

shapes.fill

String|Object

Defines the background fill options of the shape.

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

shapes.height

Number

Defines the height of the shape when added to the Diagram.

Default: 100

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

shapes.hover

Object

Defines the hover configuration.

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

shapes.id

String

The unique identifier for a Shape. The id value is used to identify shapes in connection configurations. The connection to and from properties usually point to shape id values.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "shape1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "shape2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "shape1",
        to: "shape2"
    }]
});
</script>

shapes.minHeight

Number

Defines the minimum height the shape should have, that is, it cannot be resized to a value smaller than the given one.

Default: 20

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

shapes.minWidth

Number

Defines the minimum width the shape should have, that is, it cannot be resized to a value smaller than the given one. See example at shapes.minHeight.

Default: 20

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        x: 100,
        y: 100,
        content: { text: "Shape 1" },
        minWidth: 150,
        width: 100  // will be enforced to minWidth
    }]
});
</script>

shapes.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",
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      },
      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"
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapes.radius

Number

The radius of circular shapes.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      type: "circle",
      radius: 30,
      content: { text: "Circle" }
    }]
});
</script>

shapes.rotation

Object

Specifies a rotation angle for the shape.

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

shapes.selectable

Boolean

Specifies if the shape can be selected.

Default: true

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        x: 100,
        y: 100,
        content: { text: "Not Selectable" },
        selectable: false
    }, {
        id: "2",
        x: 300,
        y: 100,
        content: { text: "Selectable" }
    }],
    connections: [{
        from: "1",
        to: "2"
    }],
    connectionDefaults: {
        endCap: "ArrowEnd"
    }
});
</script>

shapes.source

String

The source of the shape image. Applicable when the type is set to "image".

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

shapes.stroke

Object

Defines the shape border stroke configuration.

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

shapes.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: "tree",
    shapes: [{
      id: "1",
      content: {
        text: "Step 1"
      }
    }, {
      id: "2",
      content: {
        text: "Step 2"
      },
      type: "circle"
    }, {
      id: "3",
      type: "image",
      source: "https://demos.telerik.com/kendo-ui/html5-dashboard-sample-app/Content/Products/4.jpg"
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapes.visual

Function

A function returning a visual element to render for this 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;
  function getVisual(data) {
    var g = new diagram.Group({
      autoSize: true
    });
    var r = new diagram.Circle({
      width : 100,
      height: 60,
      fill: "LimeGreen"
    });
    g.append(r);

    return g;
  };

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

shapes.width

Number

Defines the width of the shape when added to the Diagram.

Default: 100

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

shapes.x

Number

Defines the x-coordinate of the shape when added to the Diagram. Does not take effect if the Diagram is using a pre-defined layout.

Default: 0

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      },
      x: 100,
      y: 20
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      },
      x: 350,
      y: 20
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      },
      x: 250,
      y: 200
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapes.y

Number

Defines the y-coordinate of the shape when added to the Diagram. Does not take effect if the Diagram is using a pre-defined layout. You can see an example at shapes.x

Default: 0

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        x: 100,
        y: 200,  // vertical position
        content: { text: "Shape at Y=200" }
    }]
});
</script>

Related Members