content

Object

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");

  var shape = new Shape({
    id: 1,
    x: 40,
    y: 40,
    fill: "#c0f0fc",
    content: {
      align: "bottom center",
      text: "State 1",
      color: "#cc3388",
      fontFamily: "Segoe UI",
      fontWeight: "bold",
      fontSize: 18,
      fontStyle: "italic"
    }
  });
  diagram.addShape(shape);
</script>

The alignment of the text inside the shape. You can do combinations between "top", "middle" and "bottom" for vertical align and "right", "center" and "left" for horizontal align. For example, "top right", "middle left", "bottom center", and so on.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        width: 150,
        height: 100,
        content: {
            text: "Right Aligned Text",
            align: "middle right"
        }
    }]
});
</script>

content.color

String

The color of the shape content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Red Text",
            color: "red"
        }
    }]
});
</script>

content.fontFamily

String

The font family of the shape content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Arial Font",
            fontFamily: "Arial, sans-serif"
        }
    }]
});
</script>

content.fontSize

Number

The font size of the shape content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Large Text",
            fontSize: 18
        }
    }]
});
</script>

content.fontStyle

String

The font style of the shape content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Italic Text",
            fontStyle: "italic"
        }
    }]
});
</script>

content.fontWeight

String

The font weight of the shape content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Bold Text",
            fontWeight: "bold"
        }
    }]
});
</script>

content.text

String

The text displayed in the shape.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Hello World!"
        }
    }]
});
</script>

Content

content

content.align

content.color

content.fontFamily

content.fontSize

content.fontStyle

content.fontWeight

content.text